Here is a challenge for bootstrap wizards: how to have my layout swap between .container and .container-fluid depending on the screen size. I.e. on mobile I want fluid, else use the regular container.
<!-- pseudo class definition to exemplify -->
<div class="container-fluid-xs-only container-sm-and-up">
<div class="row">
...
</div>
</div>
Disclaimer: the workaround I'm doing right now is tweaking the margins using media query. I.e. using .container and adding negative margins on mobile. Wondering if there is a better way of achieving this.
Requirements: Ideally I want a purely css-based solution, if really not possible, please consider that I'm using angular 1.x.
PS: I do not want to duplicate whats inside "row", in other words, I'm not interested in doing .visible-xs and .hidden-xs with duplicated content...
Thanks!
The only difference between the container and container-fluid is width so the child elements (rows, cols, etc..) will behave the same in either.
The container becomes full-width (100%) on xs screens by default, so at screen widths less than 768px, the container and container-fluid behave exactly the same. You shouldn't need to make any changes, and you can simply use container.
http://codeply.com/go/8ei2hMKBKd
I have a page in Bootstrap but I want the .container to be wider. Can I change the width of this .container?
There are several possibilities:
custom css
As it has already been suggested, you can just overwrite the default in your own css. Keep in mind, that you'll probably have to use media queries define several of these for different screen sizes
customizing bootstrap
On bootstrap's own customization page you can change practically any definition and generate a customized version of bootstrap. Look for the section called Container sizes
fluid container
If you just want a container that spans the entire width of your screen, use .container-fluid instead of .container
<div class="container-fluid">
...
</div>
You can easily override the default presentation of Bootstrap, just include your own CSS file, and do the following:
.container {
/* Write your custom width here! */
}
In my website, I have a box that's not sizing like I want.
<div class=" col-md-12">...</div>
I get too few padding than I want while the windows is monitor-screens.
The padding's fine when in phone-screens.
<div class=" col-md-10 col-md-offset-1">...</div>
It's fine padding in monitor-screens but too small with the phone-screens.
Why is this happening?
And how can I make it work on both?
Have you even read the documentation of Bootstrap?
http://getbootstrap.com/css/#grid
Bootstrap is designed for this, however, you need to tell your classes it. MD stands for medium device ... you also have sm which is the phone. So if you want 10 colums on a phone, make your class as followed.
<div class="col-md-12 col-sm-10 col-sm-offset-1">...</div>
if this isn't getting you there (the sm range is between 991 pixels till 768px), use the XS class.
<div class="col-md-12 col-xs-10 col-xs-offset-1">...</div>
That influences the devices with a resolution of 767 pixels or less.
So to come back to your question: are they combineable? Yes, they are
The combination sets you can make you can make up from 1 class to.. i dont know how many, because bootstrap will select the class it needs depending on the size of the screen. So you can add also classes to it how it should behave on large screens (col-lg) to supersmall (col-xs). I refer you further to the documentation with examples on the bootstrap website.
Happy HTML'ing!
.col-md-12 with no other classes is full width at all viewport sizes. To make the padding and margin work correctly, you need a .row around it so that the padding of the column class is adjusted by the surrounding .row (with negative L and R margin) and then outside of that you need either the .container or .container-fluid class to prevent the horizontal scrollbars.
HOWEVER, if this "Big Rectangle" is full width all the time, as it is with .col-md-12, you absolutely do not need to use any grid classes. If you want it contained within the max-width of your .container, put it directly inside the .container without surrounding grid classes, or you can put it in a .container-fluid to just get the left and right 15px (default padding) or put it inside nothing (leave it all by itself) and it will hit the edges of your viewport without any padding/gutter.
If you don't use any grid classes you can make your rectangle a percentage width with max-width (if you desire) and put the class .center-block
For whole site there is very easy with Bootstrap3 instructions
But what if I had a small container, e.g. 400px and need to turn off responsiveness inside this container? I need fully functional Dropdown in my navbar, but when responsive is on, dropdowns in small containers are not like "popups", they opens inside navbar and stretch them out.
Also, I can't compile my own bootstrap version without responsive styles, because I need to use CDN (cdnjs).
If I understood your question/problem properly, then define .container class as below in custom stylesheet. (assume that you wish to ha max width of 400px screen. change it accordingly.)
#media screen and (min-width:401px) {
.container {
max-width:400px;
}
}
And then use col-xs-xx - (xx is column number) classes only.
I'm trying to accomplish a layout similar to this one:
http://dribbble.com/shots/829195-Slate/attachments/86422
My project uses Twitter Bootstrap with responsive design. It is possible to implement a full width layout with Bootstrap?
The issue is that from what I've been reading fluid layouts will be removed in bootstrap 3.0, and the responsive design has fixed widths.
You'll find a great tutorial here: bootstrap-3-grid-introduction and answer for your question is <div class="container-fluid"> ... </div>
Because the accepted answer isn't on the same planet as BS3, I'll share what I'm using to achieve nearly full-width capabilities.
First off, this is cheating. It's not really fluid width - but it appears to be - depending on the size of the screen viewing the site.
The problem with BS3 and fluid width sites is that they have taken this "mobile first" approach, which requires that they define every freaking screen width up to what they consider to be desktop (1200px) I'm working on a laptop with a 1900px wide screen - so I end up with 350px on either side of the content at what BS3 thinks is a desktop sized width.
They have defined 10 screen widths (really only 5, but anyway). I don't really feel comfortable changing those, because they are common widths. So, I chose to define some extra widths for BS to choose from when deciding the width of the container class.
The way I use BS is to take all of the Bootstrap provided LESS files, omit the variables.less file to provide my own, and add one of my own to the end to override the things I want to change. Within my less file, I add the following to achieve 2 common screen width settings:
#media screen and (min-width: 1600px) {
.container {
max-width: (1600px - #grid-gutter-width);
}
}
#media screen and (min-width: 1900px) {
.container {
max-width: (1900px - #grid-gutter-width);
}
}
These two settings set the example for what you need to do to achieve different screen widths. Here, you get full width at 1600px, and 1900px. Any less than 1600 - BS falls back to the 1200px width, then to 768px and so forth - down to phone size.
If you have larger to support, just create more #media screen statements like these. If you're building the CSS instead, you'll want to determine what gutter width was used and subtract it from your target screen width.
Update:
Bootstrap 3.0.1 and up (so far) - it's as easy as setting #container-large-desktop to 100%
Update:
Bootstrap 3 has been released since this question was originally answered in January, so if you are a BS3 user, please refer to the BS3 documentation. For those still on BS2, the original answer still applies. If you are interested in switching from 2 to 3, see the migration guide.
Original answer:
From the bootstrap 2 docs:
Make any row "fluid" by changing .row to .row-fluid. The column
classes stay the exact same, making it easy to flip between fixed and
fluid grids.
Code
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
This, in conjunction with setting the width of your container to a fluid value, should allow you to get your desired layout.
As of the latest Bootstrap (3.1.x), the way to achieve a fluid layout it to use .container-fluid class.
See Bootstrap grid for reference
Just create another class and add along with the bootstrap container class. You can also use container-fluid though.
<div class="container full-width">
<div class="row">
....
</div>
</div>
The CSS part is pretty simple
* {
margin: 0;
padding: 0;
}
.full-width {
width: 100%;
min-width: 100%;
max-width: 100%;
}
Hope this helps, Thanks!
*{
margin:0
padding:0
}
make sure your container's width:%100
In Bootstrap 3, columns are specified using percentages. (In Bootstrap 2, this was only the case if a column/span was within a .row-fluid element, but that's no longer necessary and that class no longer exists.) If you use a .container, then #Michael is absolutely right that you'll be stuck with a fixed-width layout. However, you should be in good shape if you just avoid using a .container element.
<body>
<div class="row">
<div class="col-lg-4">...</div>
<div class="col-lg-8">...</div>
</div>
</body>
The margin for the body is already 0, so you should be able to get up right to the edge. (Columns still have a 15px padding on both sides, so you may have to account for that in your design, but this shouldn't stop you, and you can always customize this when you download Bootstrap.)
Here is an example of a 100% width, 100% height layout with Bootstrap 3.
http://bootply.com/tofficer/77686
The easiest way with BS3 is to reset the max-width and padding set by BS3 CSS simply like this. You get again a container-fluid :
.container{
max-width:100%;
padding:0;
}
I think you could just use class "col-md-12" it has required left and right paddings and 100% width. Looks like this is a good replacement for container-fluid from 2nd bootstrap.