I have seen the .container class being used in multiple places but never understood the use for it. And there is also the .container-fluid class.
Can anyone explain the use of the container class with a brief example?
It´s simple. a div.container class apply a fixed with (applies margin auto) for containing the content you want inside. And this container is responsive so when you are in XS mode (mobile) the container width is 100%.
.container-fluid just apply a 100% width (full width) in all devices, so you will see your content spanning the entire width of your viewport.
The best way to check this is to create a simple html with a div and set it a background-color, then apply .container and .container-fluid to see the effect resizing your explorer.
The .container classes in bootstrap are just that, containers for your content. By using them, your content inside can take advantage of bootstrap grid system. These classes also add some stylings like padding, centering the container, and making it responsive.
from bootsrap
Containers
Bootstrap requires a containing element to wrap site
contents and house our grid system. You may choose one of two
containers to use in your projects. Note that, due to padding and
more, neither container is nestable.
Use .container for a responsive fixed width container.
<div class="container">
...
</div>
Use .container-fluid for a full width container, spanning the entire
width of your viewport.
<div class="container-fluid">
...
</div>
Margin and width is the difference !!!
#media all and (min-width:992px) {
.container {
width: 970px;
}
}
#media all and (min-width:768px) {
.container {
width: 750px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Normally container-fluid does not provide any margin in any kind of screen
But container provide particular margin in md and lg screen
REFERENCE
Related
in the past couple of days I've been trying to stretch a certain section to fill the entire container, and I got it working. Problem is, in mobile/tablet a left-right scroll bar appears and it also messes up the sticky header.
Page that I stretched: https://roi.pub/about-me/
Code I used:
#primary .container {
padding-right: 0px;
padding-left: 0px;}
.layout-content.boxed #primary {
padding: 0px;
}
#media only screen and (min-width: 768px) {
.layout-content.boxed #primary{padding: 0 !important;}
}
And here's what a page looks like prior to stretching: https://roi.pub/elementor-2620/ I'm just trying to get the content to fill the white container without messing things up.
Advice will be appreciated.
You removed padding from the .container class, which is what needs to be there for bootstrap to work like it should.
NOTE Never override bootstrap added classes, if you want to change how bootstrap work, pull in sass/less version and do your stuff there.
On the .row bootstrap use -15px on left and right to accommodate for padding of 15px on left and right of the .container, thus when you remove padding from .container you get mess, don't override bootstrap.
#primary .container {
padding-right: 0px;
padding-left: 0px;
}
.container needs to have padding of 15px, those lines above is what makes your horizontal scrollbar. When I remove them everything work fine.
If you are not bothered with overrding bootstrap (you should) instead of setting padding to zero on the .container you need to set padding to zero on the columns itself. Like this.
.full-width {
padding: 0;
}
You already have that class, on the element that also have .col from bootstrap.
GENERAL COMMENT
If you find yourself in a need to change bootstrap setting you should use sass/less to alter the setting, but if you find yourself in a need to change bootstrap behavior then DON'T use bootstrap.
Your problem has appeared from the 1170px width of the screen (this is the width of your theme too).
so there are two solutions
Remove the -15px from the margin from the max-width media query: 1170px, and also remove the #primary #content #main paddding
#media (max-width: 1170px){
#primary #content #main {
padding-left: 0;
padding-right: 0;
}
#primary #content {
margin-left: 0;
margin-right: 0;
}
}
Either apply this code #primary .container {overflow: hidden;} on the container to hide any overwriting
I saw one question in this subject - but the answer there doesn't works.
So, as I said in the title, I have a page with <div class="container">. I want that in extra-small devices (767px), this container will become to container-fluid.
Any suggestions?
If you look at the Bootstrap CSS file, the .container class only starts using fixed widths from 768px upwards - below that (767px and below), it simply spans 100% of its parent, exactly the same as container-fluid (default div behaivour albeit with 15px of padding either side):
#media (min-width: 768px)
.container {
width: 750px;
}
In other words, on the face of it, it's pretty pointless if you ask me as the following style applies at all viewports:
.container, .container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
And since .container widths don't kick in until 768px and upwards, as you can see container and container-fluid are styled exactly the same below 767px.
EDIT - further to OP's comments, to remove the padding from the left / right side of container, I would first append a secondary class to your container div:
<div class="container nopadding">
This ensures you don't overwrite Bootstrap's default styling. You can then style as follows:
.container.nopadding {
padding-left: 0;
padding-right: 0;
}
Important to ensure that the above style is placed in your custom CSS file and that it referenced AFTER your Bootstrap files.
with jquery you can control it :
remove container class when window.innerWidth is lower than 767 (e.g:any size that you want)and add class container-fluid
$( function() {
if(window.innerWidth <767)
{
$(".container").addClass('container-fluid');
$(".container").removeClass('container');
}
});
when user changes window size :
$(window).resize(function(){
if(window.innerWidth <767)
{
$(".container").addClass('container-fluid');
$(".container").removeClass('container');
}else
{
$(".container-fluid").addClass('container');
$(".container-fluid").removeClass('container-fluid');
}
});
How can I style a div with CSS to automatically fit in a gap? At the moment, I have something like this
HTML
<div id="wrapper">
<div id="auto-width"></div>
<div id="changing-width"></div>
</div>
CSS
#wrapper {
padding: 30px;
}
#wrapper * {
height: 50px;
display: inline-block;
}
#auto-width {
width: 271px; /*I don't want to have to set this value*/
}
#changing-width {
width: 140px;
float: right;
margin-left: 30px;
}
I want the div with the ID "auto-width" to change it's width based on the padding of the wrapper, and the width and margin of the "changing-width" div. I don't mind using the padding and margin values, but in my actual project, the width of the "changing-width" div actually changes depending on the amount text in it and I want to "auto-width" div to change with it.
JSFiddle example:
https://jsfiddle.net/bve8162f/
If the width of the right div is fixed, then you could set the width of the left div like so:
#auto-width {
width: calc(100% - 200px);
}
...where the 200px is the width of your right div plus the padding. If you're using a css preprocessor like Less or Sass, you could create a variable so you can define the value in one place for both styles.
Note that the 100% refers to the explicit width of the parent. This solution seemed to work in your fiddle (updated version here,) but if your production code is set up a little differently, this may not work. I'll see if I can stumble across a different way, but this is one method I personally like to use when I can.
I have a fixed top navbar in Twitter Bootstrap 3.
Everything works good until 1350px. After 1350px there becomes a gap between navbar contents. So I want to center my navbar.
I checked answers on this, this and this. None of them worked for me.
This is my fiddle: http://jsfiddle.net/mcqHE/56/
Currently I use Navbar 1.
To try centering navbar, I added Navbar 2 to the fiddle.
Check fiddle in 1500px width.
* Navbar 1 is one line, not centered and has gap.
* Navbar 2 is centered, no gap, but it is two lined.
It seems like the cause is this rule: #media (min-width: 1200px) .container { max-width: 1170px; }
So how can I make navbar centered, and one line if width is bigger than 1350px ?
This is an aswer for your problem:-)
You need to add follow lines to css:
#media screen and (min-width: 1350px) {
.navbar { text-align: center; }
.navbar-header { display: inline-block; float: none !important; }
.navbar-collapse.collapse { display: inline-block !important; }
}
Here is solution on: http://jsfiddle.net/myN2s/ .
Let me know if you solve this.
Everytime when you want to center elements, you need to add text-align:center to the parent element, and display: inline-block to elements which you want to center horizontally. None of these can be floated (this is very important).
This fix wil affect all styles on your page. But I guess it is what you are asking for, there was not enough space to put in on one line.
http://jsfiddle.net/mcqHE/58/
* {
font-size:10px;
}
Although the below answer covered most of it, I noticed the menus are still not in one-line, here are the following change I've made:
1) Yes, it's the width that's creating the two-gaps but the major culprit is the .container. So remove the <div> with the class .container
2) Add this CSS to keep your menu items centered:
.navbar-inner { text-align: center; }
3) Lastly this:
.collapse.navbar-collapse.in{ display: inline-block !important; }
Binds the two <ul> elements together.
Additional:
If you want the heading 'Navbar' to be centered too, you can do:
.navbar-header { float: none; }
Here's the JSFiddle.
And it's effect on a resolution > 1350px.
for navbar 1 add the following css to this div div class="navbar-collapse navbar-part2 collapse
max-width: 1350px;
margin-left: auto;
margin-right: auto;
max width will make sure the nav part wont go wider than 1350px
margin-left:auto and margin-right:auto will center the nav.
I think this is what you're after? if not sorry!
How do you style a div in Bootstrap to span the entire width of the viewport (without fixed positioning) within the normal 12-grid system of "rows" and "spans"?
In the Bootstrap source, the navbar-fixed-top class achieves this effect using a fixed position and left and right attributes:
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
However, this navbar stays in the window regardless of scrolling. What styles are necessary to achieve the same entire width of the viewport without fixed positioning?
You can get that effect by stretching the body and html tags 100% in height and width and then defining a child div to that same width. We do that because width and height are relative, so if we define a div 100% in width/height it will only stretch so far as the body and html tag. Take a look at this example:
html, body {
width:100%;
height:100%;
}
body {
padding-top:60px;
}
.wrapper {
height: 100%;
width: 100%;
}
.huge {
width:100%;
height:100%;
background-color:#eee;
}
Demo, edit here.
Note: There is some extra height added to the body of the .huge div due to the padding-top added to the body to make way for the top navbar, if that padding is removed it will become a "true" 100% height and not 100% height + top 60px as it is now.
If you want to utilize Bootstrap 3 grid and build full-width layouts (stretching row to the entire viewport width) you should consider two things:
Bootstrap's .row class sets the margin property to: margin: 0 -15px;.
Grid content should be wrapped in a containing element to offset the aforesaid margin.
CSS
.container-full-width {
padding: 0 15px; /* Offset .row's margin */
width: 100%;
}
/* Optional. See comment below. */
.row {
padding-left: 70px;
padding-right: 70px;
}
HTML
<body>
<div class="container-full-width">
<div class="row">
...
</div>
</div>
...
</body>
Bear in mind that the .row elements will have no margin, but it can be fixed by overriding the padding property of the .row class and setting the expected margin.
Alternatively you could consider overriding .row class and offsetting a margin value, but this requires setting different values for different media/device types.
It is worth checking whether it works in Bootstrap 2 likewise.