I have used the bootstrap framework to create a responsive site, however I have not used the bootstrap .container class.
For my project, all the content sits withing a div with a class of .wrapper. The wrapper is fluid and has a width of 80%, max with 1200px and min width 360px.
Within the wrapper I have used the standard .row and .col Boostrap classes.
I have tested the site and everything works as expected. The site validates and (even works on ie-9) and mobile devices.
Is it OK to use the above method without the .container class?
Many thanks,
p
There's no reason that you must use container elements. However, the .container-fluid class does almost exactly what you describe. I'd consider switching your custom wrapper to that for standardization and ease of maintenance.
Regarding your row margins--that's not a great idea. You may find yourself wanting to do a modern "flat" design where you'll want some of your rows stacked tightly. It's usually better to leave grid elements alone, and apply margins and padding to inner elements. You could put a class on the row to do so:
.row.padded > div div { /* > div should be a column */
margin: 1em 0;
}
<div class="container-fluid">
<div class="row padded">
<div class="col-xs-12">
<div> ... </div> <!-- this will have a margin -->
If you don't use rows, you are fine. Rows go to negative margins without container.
edit: Anyway, if you use bootstrap3, you should be fine even with rows...
Bootstrap is a big set of classes that are meant to be useful; however, by no means are you forced to use them. If you want something more customized than the default Bootstrap classes, then using your own class is totally fine.
Related
I have seen many pages having class="container" inside div tag, but what is the use of it? As per what I understand div tag itself is a container then what is the purpose of class="container"?
You're right in saying that div is a container itself. But, frameworks like Bootstrap have defined their CSS in such a way that you will find different classes everywhere.
The container class can be applied to an element other than div too, although div is recommended.
The container class gives your webpage some basic margins and sets it in a way that it is easy to view on all devices.
This is specific to Bootstrap. Other frameworks may use the same name "container" or something else for the same purpose.
actually "container" class contains its own styling that is written in bootstrap class like div is just empty container but "container" class has, for example, 1000px width and also some media queries for mobile-friendly usage responsive designing.
the empty div tag does not equal to "container" class.
Since the new Bootstrap 4 is migrating from using 'floating' elements to the better 'flexbox' method, just wondering is it ok to construct the entire grid structure using .d-flex rather than the existing .container .row .col way?
Since both of them are fundamentally constructed using flexbox I don't see any downside of replacing one with another. In fact I feel that .d-flex requires less css class name and make things more readable within the html.
There are other reasons why I prefer d-flex than the old col:
Horizontal and vertical elements - d-flex supports creating elements both horizontally (.flex-row) and vertically (.flex-column). Col only support horizontally.
Inline element - The element's width will inherit from the child and can be align dynamically using d-inline-flex. Whereas col grid is fix.
Advance re-ordering - d-flex uses .order-x and col uses .push and .pull. In my opinion, d-flex is more intuitive, the order of elements are represented through numbering and on the other hand the number in .col is how many grids are being push and pull away from the previous state. It gets messy when you are building a more complex site....
Please correct me if I'm wrong.
Bootstrap 4 beta just got out and the whole grid system is using flexbox from now on.
You can now achieve a whole grid with only flex and it has reduced the number of classes you need. The main advantage of the Bootstrap Grid System is that you have paddings around your columns and negative margins on the .row wrapper. That way, when the columns wrap (e.g. on smaller screens), they will stay correctly aligned.
To answer your 3 points:
Horizontal and vertical elements
Just use the regular .row class to achieve a flexbox grid. You can even add .flex-column (even with breakpoints, like .flex-{breakpoint}-column). Know that the .row class has the flex-wrap: wrap property.
Inline element
The column width is not necessarily fixed:
you can use .col-auto to set width: auto on your column
you can use the unit-less .col class to make the column use the available space
you can align them with all the flex utilities Bootstrap provides
you can mix column sizes (some fixed and some dynamic): e.g. .col-md-auto followed by .col.col-lg-2
Advance re-ordering
.col-push/pull-{breakpoint} has been replaced by .order-{breakpoint}.
you can use the margin utilities (e.g. m-{breakpoint}-auto) to replace .col-offset-{breakpoint}
I have a question about what would cause the following error in bootstrap 3.
Earlier I was writing some HTML and using CSS to style and was using bootstrap 3 for the rows and the columns.
Now I had everything inside of a fluid container and the container had margins etc. It has a standard header, and each row was split into two columns where each size has a width of 6 ie col-lg-6 .... inside of the container and then I had labels and inputs inside of my rows. Just a basic layout.
Now, whenever I tried to give a bottom border to each row I noticed that after inspecting the element the row was actually outside of the designated
columns / div.
However, when I changed the class from row to row-fluid it works perfectly. Why is this? Also, I noticed that if I make a clear-fix div after using row-fluid it fixes some apparent spacing issues, is this a requirement when using row-fluid or is my code just messed up somewhere.
Asking, because I thought row-fluid was only a bootstrap 2 and not a 3 thing, or am I mistaken?
I would include a fiddle showing you exactly what I'm talking about, but don't have the code available atm.
TWBS-2
http://getbootstrap.com/2.3.2/scaffolding.html#global
TWBS-3
http://getbootstrap.com/css/#grid-intro
The <div> nested under your <div class="row"> carry the attributes container width dependent on viewport size, including all gutters and padding.
Comparing TWBS-2 and TWBS-3, TWBS-3's grid framework is designated as fluid for all viewport sizes. .row-fluid is not documented as an option, but I would refer to their version history for those specific changes. If the version history of the <div class="row-fluid"> applies, then the gutters and padding of its children's <div> columns becomes full-width to the size of the container rather than fixed-width as designated by the rules of the TWB-S3 grid system without .row-fluid designation.
The page i've made so far can be viewed here.
And the HTML here: http://jsbin.com/fujozekoqama/1/edit?html
Notice what happens when you make the browser window smaller.
Why does the image lose alignment to the menu if they are in the same container?
Here are pictures of what I'm seeing:
aligned: http://i.imgur.com/aZUkVIR.png
unaligned: http://i.imgur.com/o0Mdg4J.png
You need to remove this from your styles, because it's affecting the responsiveness of the layout:
.container .navbar-default {
min-width:640px;
width:640px;
}
and add the .img-responsive class to your image, like this:
<img class="logo img-responsive" src="http://placehold.it/350x75">
and then close the first .container div, which is open
with these tiny changes, it will work just as you want, and your layout will be responsive (which is the whole idea after Bootstrap after all).
If you need some min-width, add it in the .container class, not the inner elements. For this purpose, it's always a good idea to add an additional class to re-usable classes, for example <div class="container myMinWidth"> so you can target the .myMinWidth class without affecting the .container class, which you will need to use everywhere in Bootstrap.
And finally, unless you really need it (which you probably don't), avoid using fixed sizes in responsive layouts, if needed, try to use percentages, but make sure to check Bootstrap docs, because there are lots of built-in classes like img-responsive that will adjust your images like in your present situation
I've been playing with bootstrap 3 and I noticed that if you use the Grid System without a container it becomes fluid, someone told me I shouldn't do that because the system was design to be within a container. What happens if I don't use the container class?, do I need it?, if so could I make the container class width 100% without messing up bootstrap's media-queries, or is there any other or better way to build a fluid layout with bootstrap 3.
Update Bootstrap 4
Outermost rows should also be wrapping in container or container-fluid in Bootstrap 4 to prevent horizontal scolling caused by negative margins on the .row.
Bootstrap 3
You should wrap row in container or you'll have a problem with the negative margins that BS 3 uses for the row element. Basically the row is designed to be within a container. Read more on the Bootstrap grid
Play with this example on Bootply: http://bootply.com/83751
According to the latest documentation:
https://getbootstrap.com/docs/5.1/layout/gutters/#no-gutters
it is reasonable to drop the outer container (or at least its css class assignment):
Need an edge-to-edge design? Drop the parent .container or
.container-fluid.
This appears to have been in the documentation since the 4.0 release: https://getbootstrap.com/docs/4.0/layout/grid/
I think you need it.
Without the container it kind a works - but it shows a horizontal scroll bar at the bottom of the page and around 20px are cut off from rightside of the screen.
See yourself how it works without the container class - just go to http://getbootstrap.com/ and remove the container class using inspect element.
Just use the container-fluid class instead of the container class.
class="container-fluid" will allow you to use full width.