When using Twitter bootstrap's grid system, should every grid column div (with the class span*) have span* class as its only class, like:
<div class="row">
<div class="span4">
<div class="sidebar">...</div>
</div>
<div class="span8">
<div class="content">...</div>
</div>
</div>
Or can we mix span* class with other classes, like:
<div class="row">
<div class="span4 sidebar">
...
</div>
<div class="span8 content">
...
</div>
</div>
.sidebar and .content are CSS rules and not simply for Javascript/CSS rule traversal or used as IDs.
It depends on what those other classes do.
If .sidebar and .content are used exclusively to scope CSS inside those divs, or if they are labels for javascript traversal, then you are probably fine using them.
However, if you have rules attached to these classes that impact layout such as width, height, margin, and so on, you may experience problems.
Related
I just want to be sure about some basic HTML structuring.
Most HTML page body layouts start with a <div class="container"> which of course contains all the HTML in with boostrap v4 it contains rows and columns.
All nice and easy there.
My question is, am I "correct" or not to place columns and rows within separate containers?
This is what I mean:
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
</div><!-- end body -->
I think the answer to my question is that "it is ok" because for example what happens if you want a full-page width div container then you'd use a separate container for those elements.
I just want to be sure, thanks!
As per your example, if the content has to be inside the container, then using multiple containers is redundant. Use a single container and then separate the rows.
This approach also depends heavily on the design.
Full page width div, YES, the separate container is correct.
Note : For full width
Use container-fluid for full width, and remove the padding as well.
container-fluid class has padding-left : 15px and padding-right: 15px.
You can remove it to cover the div end to end. You can use pl-0 and pr-0, classes provided by bootstrap to set padding-left and padding-right to 0, respectively.
I have a page where container-fluid is the main div and then nav comes. After nav I have section where views loading in with row wrapping up content which is divided in columns or offsetted. But When I use a row class either on section or the div after , it is creating a gap between nav and page. Mainly adding it to container. But that is why we should be using container. And row is for columns so why still the gap?
<div class="container-fluid ng-scope" id="page-wrapper" ng-controller="homeCtrl as ctrl">
<nav><div class="container"></div></nav>
<section>
<div ng-controller="assumeIdCtrl as ctrl" class="row ng-scope">
<div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3">
</div>
</div>
</section>
Use default bootstrap's nav, you can copy the code from W3C.
Then make your structure correctly like, for example:
<nav> </nav>
<section class="container-fluid">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</section>
Check that there are different container types. div, nav, aside, section, footer, etc are containers by default. It's ok and awesome to use bootstrap, but we have to remember the default atributes of HTML tags before aply bootstrap.
Try with the default bootstrap's fixed nav.
I made an example of portfolio using it, you can check and inspect here:
portfolio example
it's very clean concerning js (only one jQ function if i dont remember wrong) and there's only a bit of handmaded css.
There is a lot of tutorial about bootstrap elements.
But I want to know where I must use nav/header/container/row/well/panel/section
for example..Do it needs use row for column 12?
1- currently I do it this way:
<body>
<div class="container-fluid"> /*only for top navbar*/
<nav>
</div>
<div class="container"> /* for body */
<header></header>
<main class="row">
<div class="col-md-2"></div>
<div class="col-md-5"></div>
<div class="col-md-5"></div>
</main>
<footer class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</footer>
</div>
</body>
Is it true?
2- Is this format true or necessary?
<div class="row">
<div class="col-md-12"></div>
</div>
3- which one is standard?
<div class ="well">
<div class="row"> <div class="col-md-*"></div> </div>
</div>
or
<div class ="row">
<div class="well"> <div class="col-md-*"></div> </div>
</div>
4- dose it need use "container" class for all section or only for parent section?
for 1:- yes it's a correct method. whenever you want to use bootstrap column classes like col-xs-12 in their first parent you must put class " row ".
for 2:- this is true. method also accessory.
for 3:- first option is correct.
for 4:- depends of need of page design. if all site are in same container with then you can put it in parent class.
All options you mentioned are correct.
However, below written structure makes sense. That means if you are using col in container or container-fluid it should be in row.
<div class="container">
<div class="row">
<div class="col-*-*">
</div>
</div>
</div>
If anytime you want to check how well your bootstrap is written, you can check it on http://www.bootlint.com/
But I want to know where I must use nav/header/section/footer
Well all these fields are only for semantic purpose, actually they all could be div. In the future or even now it is best practise for SEO to use nav for navigation, footer for the footer etc. For example header should be used to introduce content, it often contains <h1> - <h6> tags.
There are many informations to this in the web, here is a reference
All the other bootstrap classes are just styles which you could apply by yourself. A container for example can be used once for all of your content if you never need a full width element, but sometimes you have a situation where you need a full width element (f.e. an image) then you dont want to wrap all of your content into container.
Here you want to use multiple containers and not one for everything (Fiddle)
Hope this helps you a bit.
I have several elements I want to display on a page, and I am using Angular's ng-repeat to do it. I want to display it by having a 3x3 column, so I am using Bootstrap's col-md-4. My HTML is as follows:
<div ng-controller="resourcesController">
<div class="main-body">
<div class="container-fluid">
<div class="resources">
<div ng-repeat="org in orgs" class="col-md-4">
<img src={{org.icon}}>
</div>
</div>
</div>
</div>
</div>
However, the elements are appearing like so:
How can I center the elements and spread them over evenly across the page while using ng-repeat? Thank you!
My suggestion would be that it is not enough to use only one ng-repeat.
Instead, you could separate your orgs array into an array of arrays representing rows of columns.
Then you could modify the code similarly to below (making it easier to apply the grid format you want):
<div ng-repeat="orgRow in orgRows" class="rowClass">
<div ng-repeat="orgElement in orgRow "class="columnClass" >
<img src={{org.icon}}>
</div>
</div>
A simple bootstrap helper class text-center should do most of it for you
<div ng-repeat="org in orgs" class="col-md-4 text-center">
In addition could add class to the <a> tags and:
a.content-class{display:block; text-align:center}
If my page uses the Bootstrap class row, col-md-x and such to arrange the content, what would be the proper way to create a distance between each div containing a whole element semantically speaking?
I am adding a div with a padding between the divs to simulate the gap, is this a good tactic or is there a better one?
Starting from Bootstrap v4 you can simply add the following to your div class attribute: mt-2 (margin top 2)
<div class="mt-2 col-md-12">
This will have a two-point top margin!
</div>
More examples are given in the docs: Bootstrap v4 docs
Adding a padding between the divs to simulate a gap might be a hack, but why not use something Bootstrap provides. It's called offsets. But again, you can define a class in your custom.css (you shouldn't edit the core stylesheet anyway) file and add something like .gap. However, .col-md-offset-* does the job most of the times for me, allowing me to precisely leave a gap between the divs.
As for vertical spacing, unfortunately, there isn't anything set built-in like that in Bootstrap 3, so you will have to invent your own custom class to do that. I'd usually do something like .top-buffer { margin-top:20px; }. This does the trick, and obviously, it doesn't have to be 20px, it can be anything you like.
I required only one instance of the vertical padding, so I inserted this line in the appropriate place to avoid adding more to the css. <div style="margin-top:5px"></div>
The easiest way to do it is to add mb-5 to your classes. That is <div class='row mb-5'>.
NOTE:
mb varies betweeen 1 to 5
The Div MUST have the row class
An alternative way to accomplish what you are asking, without having problems on the mobile version of your website, (Remember that the margin attribute will brake your responsive layout on mobile version thus you have to add on your element a supplementary attribute like #media (min-width:768px){ 'your-class'{margin:0}} to override the previous margin)
is to nest your class in your preferred div and then add on your class
the margin option you want
like the following example:
HTML
<div class="container">
<div class="col-md-3 col-xs-12">
<div class="events">
<img src="..." class="img-responsive" alt="...."/>
<div class="figcaption">
<h2>Event Title</h2>
<p>Event Description.</p>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="events">
<img src="..." class="img-responsive" alt="...."/>
<div class="figcaption">
<h2>Event Title</h2>
<p>Event Description. </p>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="events">
<img src="..." class="img-responsive" alt="...."/>
<div class="figcaption">
<h2>Event Title</h2>
<p>Event Description. </p>
</div>
</div>
</div>
</div>
And on your CSS you just add the margin option on your class which in this example is "events" like:
.events{
margin: 20px 10px;
}
By this method you will have all the wanted space between your divs making sure you do not brake anything on your website's mobile and tablet versions.