Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting max width for body using Bootstrap

I'm building my first site with Twitter Bootstrap and experimenting with fluid layouts. I've set my container to be fluid, now the content inside takes up the full page width and adapts as I resize the browser.

The design I'm working on was created for a maximum width of ~950px.

I've checked variables.less and responsive.less, and the Bootstrap documentation; I can't quite work out how to make this happen.

I also tried adding the following to my style.css:

body {     max-width: 950px; } 
like image 901
Olly F Avatar asked Mar 16 '12 00:03

Olly F


People also ask

How we can set width in Bootstrap?

Width and Height Utilities The width and height can be set for an element, by using 25%, 50%, 75%, 100%, and auto values. For instance, use w-25 (for remaining values, replace 25 with those values) for width utility and h-25 (for remaining values, replace 25 with those values) for height utility.

How can I set a full width image in Bootstrap?

“bootstrap full width image” Code Answer's you have to set the width of image to 100%, for that you can use Bootstrap class "w-100". keep in mind that "container-fluid" and "col-12" class sets left and right padding to 15px and "row" class sets left and right margin to "-15px" by default.


1 Answers

You don't have to modify bootstrap-responsive by removing @media (max-width:1200px) ...

My application has a max-width of 1600px. Here's how it worked for me:

  1. Create bootstrap-custom.css - As much as possible, I don't want to override my original bootstrap css.

  2. Inside bootstrap-custom.css, override the container-fluid by including this code:

Like this:

/* set a max-width for horizontal fluid layout and make it centered */ .container-fluid {   margin-right: auto;   margin-left: auto;   max-width: 1600px; /* or 950px */ } 
like image 184
jcg Avatar answered Sep 22 '22 00:09

jcg