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! */
}
Related
I have a site utilizing the bootstrap framework and I want to change the outside margins that are default for Bootstrap's '.container' class.
I want the margins narrower on the outsides, and I want to not have it jump to different sizes based on screen/resolution (For those who use Bootstrap, when the screen gets to a certain size .container class automatically jumps to a different set of margins.)
I just want a consistent margin throughout that I can set.
You can simply override the CSS. However, you should avoid modifying the Bootstrap files directly, as that limits your ability to update the library. Place your own, custom CSS after Bootstrap, and modify it however you choose.
Further, try using SASS or LESS and creating a variable for your margins/padding. Then you can reuse the variable for various breakpoints or custom containers, and have a single point to edit the margins/padding later.
Another good idea is to modify your containers with a custom class, so that the original styles are preserved. For example:
<style type="text/css">
.container.custom-container {
padding: 0 50px;
}
</style>
<div class="container">
Here's a normal container
</div>
<div class="custom-container container">
Here's a custom container
</div>
In bootstrap 4, container-fluid gives a full-width container
Create a css file of your own and attach it after boostrap.css (dont override the default css), and change whatever you want (include !important to your attribute if needed).
About narrow the outside, change 'padding-left' and 'padding-right' of class container (or container-fluid) to fit your will (default to both padding is 15px)
To fix the width of the web, you can include 'width: 1000px' (or whtever number (percent) you want) to 'container' class
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.
In bootstrap 3.0 I can wrap .container class with my class and set the width to my class to 980px
EX
<div class="maincontainer">
<div class="container">
//some content
</div>
</div>
CSS
.maincontainer {
max-width: 980px;
margin:0 auto;
}
That code will wrap my contents with 980px,
but in bootstrap 3.0.2 the author has change class .container to width not max-width in bootstrap 3.0.
So it is hard to set 980px for my layout!!
I'm using LESS css!
Any ideas?
A few of choices
In bootstrap, if one is using responsive design on the grid, then width is set by a variable (currently in 3.0.2 on line 43 of grid.less and following, depending on size).
Choice #1
Change the #container-XX variable(s) controlling the width in the variables.less file to achieve the 980px (for whatever size(s) you want it) which will then make the .container control the width and be what you want. I recommend this only if you actually still want some form of responsive site.
Choice #2
If you want to control the width still by your .maincontainer class, then in the same variable file noted in #1, change all the #container-XX (for sm, md, lg) to be auto which will make elements fit to the wrapping container .maincontainer.
Choice #3
If you do not want a responsive site at all, but a statically set 980px then follow the directions in this SO answer.
My guess is you actually want #3, but I thought I would mention the other ideas as well.
Using Zurb's Foundation, I'm attempting to add my own styles to the navbar, which is working great. Unfortunately, Zurb's responsive navbar changes its look when the viewing container becomes smaller. When it does this, it adds a second class to the nav element.
Before responsive change:
<nav class="top-bar">
After responsive change:
<nav class="top-bar expanded">
My custom styles look terrible for this expanded navbar, and I was wondering if there was a way to only apply styles when an element contained solely 1 class and not multiple. I know it's very easy to only apply styles when an element has two or more classes, but can you exclude one?
Thanks!
You can use this selector for your style in css:
.top-bar:not(.expanded){
//your style
}
One option is to apply those styles for top-bar within an #media rule that only applies them down to a minimum screen width. That minimum width would, of course, be the width at which the expanded styles kick in.
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.