Can't seem to find the answer to my question.
Right now I am learning how to use bootstrap, and I read it needs a container to wrap the sites elements. I want the entire webpage to be in a fixed position, not full width. But I don't understand if I can just use one div class="container" for the whole page, or if it has to be for every section such as the navigation bar, header, etc..?
I am not sure if I have explained myself correctly. If you have any questions please ask and I will try to explain it better.
EDIT
Below Jackson said "You can use one container div if you like but then all of your page will be contained within that space. It depends on your intention"
That is what I would like to do, but i don't know where to put the container tag to achieve that.
I am sorry for not being clear. I also don't have any code to show because I haven't tried to make it yet considering how confused I am about this.
As you've mentioned, use the .container class for fixed layout. There are multiple right answers. Your container can be the first div inside your body tags. Or you can use the container inside of nav and other divs like so.
<html>
<head>
<!-- head stuff -->
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- navbar stuff -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<!-- jumbotron stuff -->
</div>
</div>
<div class="container">
<!-- content stuff -->
</div>
</body>
</html>
Assuming I know what you're talking about, you want something like this:
<div class="nav navbar-nav">This would be where your header/nav links go</div>
<div class="container">
Everything else on your page that you want "contained" would go inside this container
</div>
In the above example, the header/navigation would span full-width of the page and everything inside the container would stay within the space of the container.
The container has two main purposes:
Make your content fixed-width (can use the fluid container if you want full width)
House grid components (the .rows and .col-...s)
When you use .row, it sets a negative left and right margin to account for the gutter between columns. A container creates left and right padding to counter this negative margin on the rows. Without the container, your rows would extend outside of the page and cause horizontal-scrolling (probably not desirable).
So the proper way to use containers would be to wrap your grid components in them:
<!doctype html>
<html>
<head>
...
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
</div>
</div>
</body>
</html>
As far as using multiple containers goes, it depends on the situation. Bootstrap uses containers in some of its other components such as navbars. But generally, you should just need one container for the majority of the page as you can have multiple rows in the same container. The main reason for having a new one might be to switch between a fluid container and fixed-width container.
Related
In Bootstrap, must all content- even just a basic block of text placed in the middle of a page for example, be placed inside columns and rows. My website seems to work just fine doing this:
<div class="container-fluid">
<h2>My Heading</h2>
<p>This Is Content On the page</p>
</div>
Yet, I have been told it should be like this:
<div class="container-fluid">
<h2>My Heading</h2>
<div class="row">
<div class="col">I'm content inside the grid</div>
</div>
</div>
Yet, on some of the templates on the bootstrap site itself, they don't always use columns and rows.
I'm really confused...
Thanks
No, not all content needs to be placed in .rows.
.rows and .cols simply provide you with a customizeable grid system (i.e.: number of columns, gutter sizes, responsiveness breakpoints are a few of the things one could customize) aimed at displaying content differently at various page widths. That (and also the division of the row in 12 columns) are what it was designed for.
The only purpose of rows and cols is to divide the space differently at different page widths and to provide some minor padding (gutters). If you don't need that for a part of your content, don't use it. Whenever you have a section which you want displayed according to your own custom rules, you can simply include and style it as you want.
So, for example, this is perfectly valid and can be seen in various Bootstrap examples:
<div class="container">
<div class="row">
<div class="col">
... normal layout cols here
</div>
</div>
<div>
your custom stuff here. you need to provide responsiveness CSS rules for this content.
Out of the box, being a `<div>`, this will fill all the available width
if, for example, it was included in a `.container-fluid`,
it would span the entire browser window, at all screen widths.
</div>
<div class="row">
<div class="col">
... more normal layout here...
</div>
</div>
But whenever you want to use .cols, you should place them as direct children of .rows. If you do not, you will see some nasty horizontal scrollbars across your content, because the grid has a system of negative margins and (positive) padding to cater for gutters at various width sizes.
With this basic example everything works fine, especially when the heading is centered. Using different approach for Bootstrap grid is usually not a good idea.
From Bootstrap docs:
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
As alignment problems will occur in the long run.
Secondly when you start using SASS with Bootstrap and change grid variables then everything stays aligned and is controlled from
one place.
In your example if you want to align the heading you need to add a margin-left so that is would be aligned with I'm content inside the grid.
Look at this example how everything is aligning with and without rows/columns: https://codepen.io/LaCertosus/pen/KKKzVqR
<div class="container-fluid mt-5">
<div class="row">
<div class="col">
This text is inside <b>row</b> and <b>col</b>
</div>
</div>
<div class="row">
This text is only inside <b>row</b>
</div>
<div class="col">
This text is only inside <b>col</b>
</div>
<div>
This text is only <b>container</b>
</div>
</div>
<div>
This text is outside <b>container</b>
</div>
It is the right question to ask why I have to generate so much boilerplate but it will come out in the long run when elements need to align and scale in different screen sizes.
Just working with bootstrap and was wondering if it was okay to use empty div or spans as placeholders to make my grid work the way I want.
For example
<header class="row">
<div class="col-md-4"></div> <!-- is this ok? -->
<div class="col-md-8">Some Content</div>
</header>
Right now I am trying not to use empty divs but use the offset class but I would like to put the offset on the right side instead of the left is that possible?
Not sure if I understand your question correctly, but have you tried this:
<header class="row">
<div class="col-md-8 col-md-offset-4"></div>
</header>
I read somewhere (on Stack Overflow as a matter of fact!) that it's a bad idea to use tables to layout pages in html.
I have an HTML page that needs to be "divided" down the middle with some content going on the left and some content going on the right. At fist I would have thought to use nested tables with each of their widths being 50%. Can I do the same thing using div? Or some other html construct?
<div style="float:left; width:50%;">
Left <!-- Set Div As your requirement -->
</div>
<div style="float:left; width:50%;">
Right <!-- Set Div As your requirement -->
</div>
This should achieve (very basically) what you want.
body,html{height:100%}
div.mainLayout{float:left;width:50%}
div.clearFlt{clear:both}
<html>
<head>
</head>
<body>
<div class="mainLayout">LeftContent
<div class="clearFlt"></div>
</div>
<div class="mainLayout">LeftContent
<div class="clearFlt"></div>
</div>
</body>
</html>
One common way for a base layout is to wrap your areas into div containers. Those containers are positioned and sized using CSS.
If you'll inspect the stackoverflow page (if using firefox, right-click on any element on the sidebar on the right, and select 'Inspect Element'), you'll see that the sidebar is a div element with a float attribute. No tables on the Inspector stack at the bottom of the page!
I am trying to build up a website with a Navigation bar on top of the page. It should be fixed on top of the browser when we scroll the page (like facebook or twitter), but not scroll with the page(like google search??). see Fig like:
seems like we should set the css attribute position of this navigation bar like
#nav_bar {
postion:fixed;
}
but why all those websites use a whole bunch of div to do this? Does all these divs make any sence? Like twitter:
where topbar js-topbar is the outmost div which size is 1583*40px, but I didnt find the definition of its size. And then it goes to global-nav->global-nav-inner->container, finally...container, which is acutually hold the navgation items like a list, a search bar so on and so forth. something Weired is that the size of it is 865*0px. For more information, you can view source of the home page of twitter.
And my question is : but why all those websites use a whole bunch of div to do this? Does all these divs make any sence? Why is a div which height is 0px can hold those navigation items?
why the 'many' divs?
The general idea is the more wrapping elements you have the more flexibility you have with regards to what you can achieve in styling with css. Obviously there is a limit, as you should also try to keep your markup readable and semantic. I would say many important or segregated regions in a site would benefit from three wrapping elements:
<div class="positioner">
<div class="padder">
<div class="alignment">
Menu Here
</div>
</div>
</div>
Obviously with the more semantic HTML5 elements you can make this more readable:
<header class="positioner">
<div class="padding>
<nav class="alignment">
Menu Here
</nav>
</div>
</header>
The reason for keeping a seperate element for padding is so that you can set specific dimensions to your positioner (i.e. header) and not have that calculation messed up on certain browsers (with old box modles) by the addition of padding.
The reason for keeping alignment seperate is because it will give you greater flexibility on the alignment tricks you can use.
The reason for using the header element is because this content will act as a header imo.
The example you give above, each element will most definitely have it's reason for existing and they will most probably all be used to achieve the layout the designer wanted with regard to css. Some times extra wrapping divs are also used as placeholders for content that may be AJAXed, this is probably quite likely when dealing with the likes of Twitter.
You can of course get away with using only a single wrapping element, but you will be limiting what styling and positioning you can achieve later on down the line.
why the height 0px?
There is a trick often used with positioning absolute layers in a relative location (rather than an absolute location) - and I believe this is the reason why you are seeing this, but the trick in itself isn't the actual cause of the height:0px. The trick uses the following construction:
<div style="position: relative;">
<div style="position: absolute;">
The content here will float outside of the document flow,
but remain in the correct location within the document flow
- in all viable browsers.
</div>
</div>
If you inspect the above construction, using any browser debug method, you will notice that the position: absolute; layer has collapsed to have no height (in modern browsers). This is the default behaviour of position absolute outside of the old Internet Explorer world (with no other positioning or dimensions settings), because an absolutely position element is taken out of the document flow and by default doesn't calculate anything to do with it's children.
If you wish to override this behaviour you can simply use overflow:hidden; (as long as the height has NOT been specifically set to 0px by some other class or by JavaScript) - this will force the element to calculate the dimensions of it's children and wrap them.
First of all use position:absolute; if you don't want it move with you when scrolling. position:fixed; if you do.
Second of all when you build a website the first thing you're going to have to do is decide how the structure of your website is going to look like. So the menu at the top will be
<div id="Menu"> </div>
Now you may want to create a header under it
<div id="Header"> </div>
Under that you want to share content, since thats what website do.
<div id="Content"> </div>
Under that you may want a footer, that says 2012 Copyright etc.
<div id="Footer">2012 Copyright zoujyjs © </div>
Now you may want to center everything. Why not just put all these previous divs inside a wrapper div. Then all we have to do is center the wrapper div.
<div id="Wrapper">
<div id="Menu"> </div>
<div id="Header"> </div>
<div id="Content"> </div>
<div id="Footer"> </div>
</div>
You could also add stuff like a logo inside the header, etc.
I think you get the idea. But isn't it obvious you're going to get "divception" then?
Also: When no height is specified on a div, the div will automatically resize with the content within.
<div style="background-color:black;">
<!-- Nothing will be seen on your page, because the div is 0 height, 0 width by default -->
</div>
<div style="background-color:black;">
Height of the div will now be the same height as the height of this line. (15 px by default I believe
</div>
I can't figure out why my navigation at the bottom of this page ("prev" and "next" links) are longer than my #bloglist post teaser that are above width wise. I'm using twitter bootstrap out of the box and am using the scaffolding that they offer.
http://www.b-lew.me/page/3/
any thoughts or suggestions would be much appreciated!
There are some markup inconsistencies :
Each of your rows should be a .row containing a .span12 (and you won't need your .margin-left class)
Almost everything is floating, and float: left elements will not fill their container to their right
clear: both is not needed, just use the .clearfix class for the container, but you usually won't need it
Here is the markup I tried :
<div class="container">
<div class="row">
<div class="span12">
<div class="well bloglist clearfix">
<!-- etc -->
</div>
</div>
</div>
</div>
And for the css
.bloglist should not be floating left.
It appears that there is a lot of residual markup from another design, and IMHO you are going to have a lot more graphic bugs if you don't stick to the proper bootstrap architecture.
It appears you are expecting the overall size to be span12, evidenced by </div><!-- /span12 --> However! You do not have this class declared in the opening block anywhere, and your bloglist items are span4 and span7, so the overall size would be span11. I edited a bloglist item to be span4/8, which seemed to align with the pager. I would revist your opening markup to get it to the expected size