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.
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 want to wrap a group of rows in bootstrap while still having everything in one container. Are there any rules/conventions about this regarding bootstrap?
I put a fiddle below of what i want to do, but i am not sure if this is the right method.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="extraDiv" id="topdiv">
<div class="row">
<div class="col-md-12">Bla</div>
</div>
<div class="row">
<div class="col-md-6">Bla</div>
<div class="col-md-6">Bla</div>
</div>
</div>
<div class="extraDiv" id="bottomdiv">
<div class="row">
<div class="col-md-12">Bla</div>
</div>
</div>
</div>
As far my understanding it is totally okay the way you use .row class in a .container class. For further understanding you can check this link Must Bootstrap container elements include row elements?
Seems fine - though it depends what you want to do with the gutters etc.
Generally you just want one .container wrapping the whole page (to give you the main central column), and within that you can nest as many rows/cols as you need to.
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.
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.
I have a layout built using CSS display:table (inline, row, cell, etc). I'm doing local development on it with apache, and when I refresh the page, two of the div containers are incorrectly lined up. However, if I uncheck and re-check display:table-row, they correct themselves, and the page displays correctly.
http://jsfiddle.net/fNNKT/
You can see the HTML and CSS at the jsFiddle above. It's actually not working there either, so maybe I'm doing something wrong, and can use help with that.
<div class="cabinet-container">
<div class="mode-bar">
<div class="mode-bar-left">
<div class="mode-bar-item">logo</div>
<div class="mode-bar-item active">Dispense</div>
<div class="mode-bar-item">Inventory</div>
</div>
<div class="mode-bar-right schedule">
<div class="mode-bar-item">Sign-Out</div>
</div>
</div>
<div class="table"></div>
<div class="left-container"></div>
<div class="center-container">
<div class="search-container">
<div class="table-cell">
<div class="search-field"></div>
</div>
</div>
<div class="nav-button-center-container">
<div class="table-cell">
</div>
</div>
<div class="list">
<div class="table-cell">
<div class="list-item-center-container"></div>
<div class="list-item-center-container"></div>
<div class="list-item-center-container-partial"></div>
</div>
</div>
<div class="nav-button-center-container-down-active">
<div class="table-cell"></div>
</div>
</div>
<div class="footer">
<div class="button-group table-border-5">
<div class="button-secondary">Dispense Non-Drug</div>
<div class="button-secondary">Sort By: Last Name</div>
</div>
<div class="button-group-right table-border-5">
<div class="button-primary">New Clinical Order</div>
</div>
</div>
</div>
Is your question related to .mode-bar-left and .mode-bar-right wrapping onto two lines? If so, the problem relates to whitespace. Think of two images displayed inline, side by side. If there's whitespace between the tags in the code, there will be whitespace displayed in the browser.
Solution #1:
Take your logic one level higher up in the DOM. Change the display value for both mode-bar elements to table-cell (instead of the current inline-table). Then change the .mode-bar-item elements to display: inline-block (instead of table-cell).
Solution #2:
A faster, less elegant solution is to add float: left to .mode-bar-left.
On the topic of elegance, I strongly recommend that you consider some more semantically meaningful tags than just div. For example, .mode-bar-left is clearly a list (ul perhaps?) and the .mode-bar-item elements are clearly list items (li).
Are you using any javascript/jQuery? On a recent project of my own, I was having a similar issue and all I had to do was move my custom lightbox script from the to right before the tag, and it seemed to fix the issue. Sometimes javascript can be wonky like that. I don't understand why, but that's the way it is.