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.
Related
I've been screwing around with a test website. I'm using bootstrap and know you should put everything into a container div, which gives everything inside a padding or margin?
I'm fine with that but wanted to have a carousel that takes up the full width of the viewport instead of having the space around it at the top. How do I do this?
I could just put it outside of the container, but I heard you shouldn't do this, and I need to have a nav bar on top that's inside the container so I think overall that's not a good idea.
What way could I achieve this while following "good practices"?
Any help appreciated, thanks!
Try using a div with class container-fluid instead of container. The container-fluid takes up the whole width of viewport available.
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.
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.
I am new to bootstrap 3. I am designing a page and my content requires more width. While the menu bar extends out to the sides of the browser, how can I can a bit more width for my content. I have tried changing container to container-fluid but it doesn't change anything.
Here is the code. I have 2 files, namely, cc-top-min.blade.php and show.blade.php. show.blade.php is sucked into cc-top-min.blade.php #content. http://pastebin.com/gLQc0ADP
Here is a screen shot. New more width. WOuld like to extend the content of the page to "almost" as wide as the navbar. Please help.
here is the html: http://pastebin.com/7Q4emw6j
Consider this post: Fluid Container in Bootstrap 3. Your navbar extends because it is not wrapped in a .container.
Therefore, you can just omit the .container and start with a row. To narrow it down as you want, add some padding as you see fit.
If container-fluid is not working at all; are you using bootstrap 3.1 or above as the first one didnt include it: Container-fluid vs .container
You need to replace container with container-fluid everywhere you've used it. See example: http://www.bootply.com/O7YjWCvRa8
I am using bootstrap responsive grid system only as I need only that from whole framework.
I understand that I should use grid system only for layout of the page.
But for example I have one div that should contain image on the left and some text on the right side.
I can put bootstrap grid inside that div to get desired layout as that is just two columns.
Is this how bootstrap grid should be used or this is bad practice and I shouldn't use grid inside smaller elements?
It is fine as long as you place grid elements in the right order of hierarchy:
container[-fluid] > row > col-??-## > row > col-??-## and so on.
Remember to NEVER nest a container inside another container. You should not place a container immediately followed by a col element.
All in all, it's ok to give layout to the inner part of your div regardless of its size.