I'm trying to create a site using bootstrap and no external css. It seems I can achieve many of my formatting goals using nested grid systems.
e.x.
<div class="container-fluid bs-docs-grid">
<div class="row show-grid">
<div class="col-md-6">
<div class="row show-grid">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="col-md-6">
</div>
</div>
</div>
Is this a reasonable practice?
Your code for the nesting is exactly what Bootstrap recommends: http://getbootstrap.com/css/#grid-nesting
and
https://getbootstrap.com/docs/4.4/layout/grid/#nesting (for Bootstrap 4)
Unless you have a specific need for the show-grid and bs-docs-grid classes, there's no need to include them. They aren't part of the base bootstrap CSS.
If you can achieve the layout you need using nested grids, I would certainly use them. They will save you time and reduce potential browser compatibility issues.
Good luck!
Related
Its been a while since I am trying to build a basic template having header, footer, left panel and main section using bootstrap, but I found bootstrap documentation is pretty vague and hard to figure out the actual html template for my requiremnt, especially for newbie like me. Can someone has any basic template using bootstrap like the image below.
Using this boostrap grid generator: http://shoelace.io/. I've added classes to the divs so you know which one is which.
<div class="container">
<div class="row header">
<div class="header col-sm-10"></div>
</div>
<div class="row content">
<div class="nav col-sm-3"></div>
<div class="main col-sm-7"></div>
</div>
<div class="row footer">
<div class="footer col-sm-10"></div>
</div>
</div>
As #Mech suggested the link http://shoelace.io/ has an interface where we can customize our basic layout of an html page. First design the the header/footer/Main section in this util page (All you need to do is simply select the column and drag it as per the size of the section you are designing for). Dynamically the html content will be generated as you design it.
I keep bumping into this issue where everyone keeps:
a) wanting to wrap HTML5 semantic tags with divs, and
b) wants to apply class selectors to the divs and not the semantic tags. It's as if people are afraid of slapping classes onto semantic tags for some reason.
For example, I am constantly told that this is "incorrect",
<body class="container">
<header class="row">
<div class="col-md-12"> ...
And something like this is more preferable,
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> ...
And here, where the first example I have the column class in the h2 tag
<div class="row">
<h2 class="col-4 feature">Featured Work</h2>
</div>
But "the correct" way is to add yet another div tag to apply the class,
<div class="row">
<div class="col-4 feature">
<h2>Featured Work</h2>
</div>
</div>
I understand that this might be opinion-based, but I have found that when dealing with HTML5, opinions actually matter since virtually everyone is having issues and there is no other way to hammer out the details without opinions.
I recommend sticking to the
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> ...
format.
If you intend to work with a lot other developers or with bootstrap templates- you will see that the container classes typically nest row class divs.
Since we are talking about markup there is no right answer, but following this convention is strongly recommended.
For consistency
For easy changes to styling & reusability with other projects- this even opens the door to drop-in replacements of css stylesheets from other projects or bootstrap templates. (I have had some surprisingly good results with this).
However, if you insist on giving non-div tags "container" and "col-X" tags, be consistent. I wouldn't recommend it though and would consider any template that follows its own convention to be an indicator of poor code quality.
For my site I am trying to include masonry to get content to lay out nicely but I am getting very odd results so far. Here is my code:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm news-box" style="background-color:#color"
data-masonry='{ "columnWidth": ".masonry-container", "itemSelector": ".masonry-container" }'>
<div class="masonry-container">
<div class="contain">
<img src="#w.Image" class="image img-responsive" />
<div class="middle">
#getReferrals(w.Id)
</div>
</div>
<h4>#w.Title</h4>
<p>#w.Body</p>
</div>
</div>
As you can see the outer is the one that has the masonry quality. I am not using jquery because I can't get it working, HTML at least gives me (wrong) results. Anyways, the result is this holy mess:
Something else: this content is inside bootstrap tabs. I tested it outside of them and it worked just fine but inside it's giving me problems.
Please help me if you can! Thanks in advance....
Whenever using masonry just make sure you are putting the rules at the row level and aiming for the columns, if not the layout will be odd.
I want to know if there is any problem if we do the following using bootstrap 3 with the html structure?
After reading the documentation and some examples all of them recommend doing the following structure
<div class="row">
<div class="col-lg-4" ></div>
<div class="col-lg-4" ></div>
<div class="col-lg-4" ></div>
</div>
but we are using angular in our application and the sizes of each panel could change and also each panel have it's own controller that knows when to expand or not. I already thought about a controller or an state manager but i don't know at the moment the final ui definitions.
So my question is is any problem with the following structure?
<div class="row">
<div>
<div class="col-lg-4" ></div>
</div>
<div>
<div class="col-lg-4" ></div>
</div>
<div>
<div class="col-lg-4" ></div>
</div>
</div>
That structure is fine. However there is a mistake in your class names. It should be 'col-lg-4'.
It may also pay to use some other col-- classes to handle what happens on smaller devices/screen sizes
EDIT:
After re-reading the question I see that they won't have fixed sizes. Perhaps consider implementing a function to assign different sizes to different elements.
E.G.
<div class="row">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
Now you can reference the divs with the different id's and do something like this:
//if you want a large middle column with two smaller columns on the side
$('#one).addClass('col-lg-2');
$('#two').addClass('col-lg-8');
$('#three).addClass('col-lg-2');
note: I'm using jquery for that.
The grid class should be col-lg-4 instead of col-lg 4.
http://getbootstrap.com/examples/grid/
I started to use Twitter bootstrap for this application that I am working on.
I read the documentation about nesting rows in both fixed grid system and in fluid one.
Now, I want to do something like this
So of course I could do something like this
<div class="container">
<div class="row">
<div class="span 12">red</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
</div>
and I think I would get what I want. But I am wondering what are the consequences of doing
<div class="container">
<div class="row">
<div class="span 12">red</div>
</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
I don't see any difference now in my browser but I am wondering what will happen if I include multiple row elements in single container tag. Is the row-nesting the only proper way to create something like I showed? What is the difference between those two implementations of my design, so to speak?
The second version is more correct. But both work. The difference is how it responds when the page is re-sized. The second version will shrink and react better
However if you want the containers to match the above image you need to use class="container-fluid" and class="row-fluid"
Also remove the spaces between the spans and numbers
class="span 3"
Should say
class="span3"