I want my page to have a fix width, lets say 1440px. I usually put width in body and it applies to all elements. In my new project I need to have one section in white background, width being fixed makes it so that only 1440px is white. I managed to solve this by removing width from body and creating a class:
.width-fix {
width: 144rem;
margin: 0 auto;
padding: 0 1.2rem;
}
I set that class as additional to every section I don't needed colored.
Is this the right way to solve it or is there something better? Currently it works like a charm.
I started learning HTML/CSS 2 weeks ago, sorry if its dumb question
**Edit: Image for clarification
Yes, usually I work with a classname like container or section for all the most general default styling.
Every element is packed in a section which holds the right background-color and has a div with container for the right width and margins and padding.
So something like this:
.block {
background-color: green;
}
.container {
max-width: 1440px;
margin: 0 auto;
padding: 25px;
}
<section class="block">
<div class="container">
</div>
</section>
I am trying to narrow the space between the left part and right part of this web page, it's collapsing, but I didn't find it in the style sheet.
web page: http://Megamadz.com the gap is too wide between the left: Ever wonder with a graph and the right side: platform...
Any suggestion is welcome!
the bootstrap framework is adding the padding for you (on larger sized screens). The easiest thing to do would be to add some extra classes to the left and right columns (which are now col-lg-9 and col-lg-3), then style those so:
.left { padding-right: 0px }
.right { padding-left: 0px }
if you can't control the html to add the classes to the elements, you could try this rather nasty css selector:
.middle > .row > .col-lg-9 { padding-left: 0px }
.middle > .row > .col-lg-3 { padding-right: 0px }
or
.middle > .row > div:first-child { }
.middle > .row > div:last-child { }
but of course those will be quite fragile if you make any other changes to the structure of the html, so I wouldn't recommend it. :)
Also, you may want to add additional media queries so that the style you want to apply is only effective for larger screens, otherwise you'll affect the responsive layout on small screens.
Alternatively you can customize the entire bootstrap theme to have narrower gutters, etc, but that would affect everything on the site http://getbootstrap.com/customize/
You need to override the padding-right and padding-left attributes of the BootStrap columns.
Allan's answer gives you a few ways to do it, but you can also use in-line styles to change it for those particular elements without affecting the rest of your site.
In-line styling for the left div:
<div class="col-lg-9" style="padding-right: 5px;">
<div class="mainSec">...</div>
...
</div>
In-line styling for the right div:
<div class="col-lg-3" style="padding-left: 5px;">
<div class="panel panel-success">...</div>
...
</div>
These styles would have this result.
Both .container and .col-xx-xx have padding and margin. Always double check parent elements when this sort of thing happens.
I am building a joomla 3 template so I have to use bootstrap 2. I am a bit new to BS and want to learn.
There are 4 sizes, and 3 of them are working well. I want the third smallest to go into each block being full size (like the smallest) but I am having problems getting things centered. I have used firebug to copy over the styles for row, span and container - but something is wrong.
the content is in a .span2 and I have this css
.row {
margin-left:0px;
}
.container {
background-color:#F0FA5A;
}
.span2 {
width:100%;
float:none;
margin-left:0;
display:block;
box-sizing:border-box;
}
here's a ss:
As you can see the container (yellow) is centered, but the content isn't.
So if I put the .row margin-left to -20px to pull it back the row becomes too wide thus:
If someone could suggest what I need to do please to get it right
I have also tried setting the container width to auto, with margins:auto - now its perfect, excep
You can see it at www.fct.ee-web.co.uk
thanks
In bootstrap.css you can see
[class*="span"]
value :
margin-left: 20 px;
you can edit it or override it with !importion;
put a margin-left:0 on the mainContent when have the proper size
#media (max-width: 979px) and (min-width: 768px) {
.mainContent {
margin-left:0px;
}
}
here is sample link: http://bootply.com/76369
this is html i use.
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
bootstrap 3 has no container-fluid and row-fluid.
i cannot wrap it with .container class because it will become fixed layout.
how to make it fluid (full page width) layout? (without horizontal scrollbar)
with these markup. when you view in the result the x-scroll bar is visible so you can scroll to left and right that it should not.
edited: 2015-12-09
Already got answer and Bootstrap already released the fix since 3.1.0
I also have it and while waiting on them to fix it, I added this shame css :
body { overflow-x: hidden;}
it's an horrible alternative, but it work. I'll be happy to remove it when they'll have fixed the issue.
An other alternative, as pointed out in the issue, is to override .row :
.row {
margin-left: 0px;
margin-right: 0px;
}
This was introduced in v3.1.0: http://getbootstrap.com/css/#grid-example-fluid
Commit #62736046 added ".container-fluid variation for full-width containers and layouts".
This is a known issue in BS 3 - https://github.com/twbs/bootstrap/issues/9862?source=cc
I have tested on Bootply using the latest build, so keep watching GitHub for the latest updates/fix.
In Bootstrap 3, .row is must be used inside a .container or .container-fluid to counteract the negative margins on the row. This will eliminate the horizontal scrollbar.
From the docs...
"Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding."
Bootstrap 4
The container>row>col relationship work the same way as 3.x...
"Containers are the most basic layout element in Bootstrap and are
required when using our default grid system"
If I understand you correctly, Adding this after any media queries overrides the width restrictions on the default grids. Works for me on bootstrap 3 where I needed a 100% width layout
.container {
max-width: 100%;
/* This will remove the outer padding, and push content edge to edge */
padding-right: 0;
padding-left: 0;
}
Then you can put your row and grid elements inside the container.
Update from 2014, from Bootstrap docs:
Grids and full-width layouts Folks looking to create fully fluid
layouts (meaning your site stretches the entire width of the viewport)
must wrap their grid content in a containing element with padding: 0
15px; to offset the margin: 0 -15px; used on .rows.
Just my 2 cents here. Mostly this will work for you, as it did for me.
body > .row {
margin-left: 0px;
margin-right: 0px;
}
I ran in to the same problem (wanting a fluid layout) but wanted to keep the responsive options with rearranging columns and so on for smaller screens and ended up with a small change to in variables.less:
// Large screen / wide desktop (last row of file)
#container-lg-desktop: 100%; //((1140px + #grid-gutter-width));
This value is used once in grid.less and sets
#media (min-width: #screen-lg-desktop) {
.container {
max-width: #container-lg-desktop;
}
....
}
The result is that over 1200px the grid is fluid (without horizontal scrollbars). Below that the normal responsive rules apply. You can of course set this to other media queries as well just as easily.
If you do not want to edit and compile .less yourself you could override the maxwidth in your own style sheet similair to below:
#media (min-width: 1200px) { /* or min-width: wherever-you-want-your-fluid-breakpoint */
body .container {
max-width: 100%;
}
}
All this assumes you use the normal Bootstrap grid syntax, including container, like below:
<div class="container">
<div class="row" >
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
Hope this helps!
In the latest version of Twitter Bootstrap the layout is fluid by default, hence you don't need extra classes to declare your layout as fluid.
You can further refer to -
http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/
http://blog.getbootstrap.com/
This worked for me. Tested in FF, Chrome, IE11, IE10
.row {
width:99.99%;
}
The horizontal scrollbar can appear if the container-fluid div is placed directly inside the body.
The correct way to use a container-fluid structure is:
<body>
<section>
<div class="container-fluid">
<div class="row">
<!-- content goes here -->
</div>
</div>
</section>
</body>
So, try wrapping your container-fluid DIVs inside an outer div, such as a <div id="wrap"> or a <section> or <article> or <aside> or other specialized <div>, and presto! no horizontal scrollbar.
In Bootstrap 3, putting columns immediately under body should give you a fluid layout without horizontal scroll bar
<body>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</body>
Bootstrap 3.0 version is tricky they will add fix for this issue and probably return container-fluid in Bootstrap 3.1. But until then here is a fix that I'm using:
First of, you would need custom container and set it to 100% width, and then you will need to fix row margin disposition, and navbar too if you have it:
/* Custom container */
.container-full {
margin: 0 auto;
width: 100%;
}
/*fix row -15px margin*/
.container-fluid {
padding: 0 15px;
}
/*fix navbar margin*/
.navbar{
margin: 0 -15px;
}
/*fix navbar-right margin*/
.navbar-nav.navbar-right:last-child {
margin-right: 0px;
}
You can stack container-full and container-fluid classes on root div, and you can use container-fluid later on.
Hope it helps, if you need more info let me know.
Found this workaround
.row {
margin-left: 0;
margin-right: 0;
}
[class^="col-"] > [class^="col-"]:first-child,
[class^="col-"] > [class*=" col-"]:first-child
[class*=" col-"] > [class^="col-"]:first-child,
[class*=" col-"]> [class*=" col-"]:first-child,
.row > [class^="col-"]:first-child,
.row > [class*=" col-"]:first-child{
padding-left: 0px;
}
[class^="col-"] > [class^="col-"]:last-child,
[class^="col-"] > [class*=" col-"]:last-child
[class*=" col-"] > [class^="col-"]:last-child,
[class*=" col-"]> [class*=" col-"]:last-child,
.row > [class^="col-"]:last-child,
.row > [class*=" col-"]:last-child{
padding-right: 0px;
}
This is what worked for me. I added a style inline to remove the small margin on the right. I don't really like to do inline styling, but this lone style attribute in my html makes it easy for me to remember about the hack-job spliced into my otherwise well separated code. It also eliminates the concern of my external styles loading before or after the bootstrap default stylesheet.
<div class="row" style="margin-right:0px;">
<div class="col-md-6">
<div class="col-md-6">
</div>
Apply to the body seems to get rid of the horizontal scrollbar
overflow-x: hidden;
If it still actual for someone, my solution was as follows:
.container{
overflow: hidden;
overflow-y: auto;
}
It's already fluid by default. If you want to be fluid for less width instead of col-md-6 use col-sm-6 or col-xs-6.
You can fix this problem without disturbing the bootstrap css and wait for a fix in the next version, so you can simply wrap your row by defining you own class .container-fluid with padding.
//Add this class to your global css file
<style>
.container-fluid {
padding: 0 15px;
}
</style>
//Wrap your rows in within this .container-fluid
<div class="container-fluid">
<div class="row">
<div class="col-md-3">content</div>
<div class="col-md-9">content</div>
<div class="col-md-3">content</div>
</div>
</div>
You can add a 10px padding on the sides to your body element if all it's children are rows
body {
padding: 0 10px;
}
if your HTML markup looks something like this:
<body>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</body>
The rows have a 10 px negative margin. That's what's causing the overflow. If you add 10px padding to the body, they will cancel each other out.
The only thing that assisted me was to set margin:0px on the topmost <div class="row"> in my html DOM.
This again wasn't the most appealing way to solve the issue, but as it is only in one place I put it inline.
As an fyi the container-fluid and apparent bootstrap fixes only introduced an increased whitespace on either side of the visible page... :( Although I came across my solution by reading through the back and forth on the github issue - so worthwhile reading.
Summarizing the most relevant comments in one answer:
this is a known bug
there are workarounds but you might not need them (read on)
it happens when elements are placed directly inside the body, rather than inside a container-fluid div or another containing div. Placing them directly in the body is exactly what most people do when testing stuff locally. Once you place your code in the complete page (so within a container-fluid or another container div) you will not face this problem (no need to change anything).
In the body of my site, I am trying to create two columns - one on the far right with a fixed width (300px) for advertisements etc, and one on the left which will take up the remaining space on the page. How can this be accomplished in CSS?
CSS :
.column-right {
float: left;
width: 100%;
height: 200px;
background-color: red;
}
.column-right .column-content {
margin-left: 250px;
}
.column-left {
float: left;
margin-left: -100%;
width: 250px;
height: 200px;
background-color: green;
}
HTML :
<div class="column-right">
<div class="column-content">
<strong>Right Column:</strong><em>Liquid</em>
</div>
</div>
<div class="column-left">
<strong>Left Column:</strong><em>250px</em>
</div>
Here is a tool to generate fixed liquid columns for placing adsense ads.
CSS:
#right-column{
width:300px;
float:right;
}
#other-column{
float:left;
width:100%;
padding-right:20px; /*to prevent text overlap as suggested in the comment*/
}
In HTML:
<div id='right-column'>
<!-- ads here -->
</div>
<div id='other-column'>
<!-- content here -->
</div>
You might also want to check out the YUI: CSS Grid Builder. It is a simple web interface where you specify what grid layout you are looking for, and they will provide you the html code you can use in combination with the YUI Grids CSS framework to get your desired layout. One nice thing about the YUI Grids CSS framework is it has good cross browser support which saves you time getting it to work across different browsers. You can also reverse engineer the code that you are provided from the grid builder to get some ideas on how you can do it on your own. The settings you will want to use with the YUI: CSS Grid Builder to get your desired layout is as follows:
Body Size: 100%
Body Columns: Sidebar right 300px
One solution I've found for this is to float the right column to the right and give the left column an absolute position with left:0 and right:300px. This will make it fluid as if you gave it a width:80%, but it will be relative to the parent container in a different way.
Here's an example:
http://jsfiddle.net/tkane2000/dp9GZ/
One issue you might find with this is that since it's absolute, it won't naturally push down the elements below it.
Another possible solution would be to give the left column
width:100%
padding-right: 300px;
and the right (fixed width) column:
position: absolute:
top:0;
right:0;
You might need to set box-sizing:border-box on the left column.
This also as some limitations. One that comes to mind, is that if you wanted the left column to have a border-right to separate each, the border would be on the wrong side of the right column.