I have 2 columns and on the left and the right side, When I open the web page on a small or xs screen the two columns overlap. I would like for the other column to go below the other.
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9 area-style"></div>
</div>
</div>
CSS:
.area-style {
border: 1px solid #ccc;
padding-top: 2em;
background: #fafafa;
height: 500px;
}
Please check if you have given floats to the elements inside any of the "col-md-3" or "col-md-9" divs. The Overlapping 99% occurs If the floats are not cleared.
If you are using Bootstrap4 try this.
<div class="container">
<div class="row">
<div class="col-12 col-md-3"></div>
<div class="col-12 col-md-9 area-style"></div>
</div>
</div>
Try this.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-3"></div>
<div class="col-xs-12 col-md-9 area-style"></div>
</div>
</div>
Please tell me if this helps you.
I am using Bootstrap 3 and I am having issues to make small gap between two divs. I have tried offset but still its not working here is my code
.box1 {
background-color:black;
width:150px;
height:150px;
}
<div class="container">
<div class="row">
<div class="col-md-1 col-md-offset-0">
<div class="box1">
</div>
</div>
<div class="col-md-1 col-md-offset-1">
<div class="box1">
</div>
</div>
</div>
</div>
The problem is if set second div col-md-offset-0 it gets too close first div and if I set to 1 or above it sets very big gap. I want very small gap
Edited:
Try adding margin with a custom class-name on the col divs.
like so
<div class="container">
<div class="row">
<!-- custom-spacer is a custom class-name. to add extra margin. -->
<div class="col-md-1 col-md-offset-0 custom-spacer">
<div class="box1">
</div>
</div>
<div class="col-md-1 col-md-offset-1">
</div>
</div>
</div>
<style>
.box1 {
background-color:black;
width:150px;
height:150px;
}
.custom-spacer {
margin-right: 40px; /* Increase or decrease the margin as required. */
}
</style>
There could be one problem with this approach, because you are increasing the gutter size, you will not be able to create 12 cols within the same row.
Looking at other SO questions, I managed to get the left divs span the whole page, but not the right divs. How do I fix this problem?
HTML:
<div class="container-fluid">
<div class="row col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div id="kpop" class="selection">
</div>
<div id="fashion" class="selection">
</div>
</div>
<div class="row col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div id="martialarts" class="selection">
</div>
<div id="nature" class="selection">
</div>
</div>
</div>
CSS:
body .container-fluid {
padding-left: 0;
padding-right: 0;
}
.selection {
height: 50vh;
}
Here's a demo:
http://codepen.io/davegumba/pen/QNzpey
You didn't wrap your col classes in a row tag. Also you don't need to specify all the viewport sizes if they are all 6, for example. Col-xs-6 alone will apply to all sizes higher if you don't specify.
http://codepen.io/ruchiccio/pen/oxJWLQ
<div class="container-fluid">
<div class="row">
<div id="kpop" class="selection col-xs-6">
</div>
<!--kpop-->
<div id="fashion" class="col-xs-6 selection">
</div>
<!--fashion-->
</div>
<!--first column-->
<div class="row">
<div id="martialarts" class="col-xs-6 selection">
</div>
<!--martial arts-->
<div id="nature" class="selection col-xs-6"> </div>
<!--nature-->
</div>
<!--second column-->
</div>
<!--container-->
You should not use a twitter bootstrap's "row" in a col. Row class was ment and built to rows not columns. So it has a negative margin on each side. That's what is making your 50% return a lower value.
Get rid of the class row and it will be fixed. Or if you want to preserve it remove the negative margin on both sides of both columns
You can fix this by removing the "row" class from your columns, then removing the padding on the columns. The "row" class should be used as a container for the columns. Although I find that not even using it works fine at times, but it isn't proper. Also, like some others have said, you don't need to use multiple column sizes. You need to choose a size based on what you want your content to do at smaller viewport widths.
<div class="container-fluid">
<div class="col-xs-6">
<div id="kpop" class="selection">
</div>
<!--kpop-->
<div id="fashion" class="selection">
</div>
<!--fashion-->
</div>
<!--first column-->
<div class="col-xs-6">
<div id="martialarts" class="selection">
</div>
<!--martial arts-->
<div id="nature" class="selection">
</div>
<!--nature-->
</div>
<!--second column-->
</div>
<!--container-->
Styles:
.col-lg-6, col-md-6, col-sm-6, col-xs-5 {
margin: 0;
padding: 0;
}
The problem isn't with the code itself, it's with the structure of the HTML. In order to properly use Bootstrap, you need a row to wrap the columns. What you have right now is the rows and columns all in the same. Also, just as a side note, it's considered best practice to define starting at the smallest screen and work your way up to larger screens since the framework is mobile-first.
Here is how you could rewrite your code with the suggested changes:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div id="kpop" class="selection">
</div>
<div id="fashion" class="selection">
</div>
</div>
<!-- End col -->
<div class="col-xs-6">
<div id="martialarts" class="selection">
</div>
<div id="nature" class="selection">
</div>
</div>
<!-- End col -->
</div>
<!-- End row -->
</div>
<!-- End container-fluid -->
Another thing you should keep in mind is that since Bootstrap is mobile-first, you don't need to repeat column definitions, as they automatically ripple up. For example, you defined 6-block columns for xs, s, m, and l screens, but you only need to define it for xs since it will automatically apply to all larger screens (s, m, l) unless it gets overwritten.
Inspecting the code seems the problem is related to the fact you have the class row .row with margin-right and margin left = -15px;
set both to 0
.row {
margin-right: 0px;
margin-left: 0px;
}
I did this:
Basically, removed row class and added no-padding class to all column classes.
http://codepen.io/anon/pen/mPamEZ
<div class="container-fluid">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding">
<div id="kpop" class="selection">
</div>
<!--kpop-->
<div id="fashion" class="selection">
</div>
<!--fashion-->
</div>
<!--first column-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding">
<div id="martialarts" class="selection">
</div>
<!--martial arts-->
<div id="nature" class="selection">
</div>
<!--nature-->
</div>
<!--second column-->
</div>
<!--container-->
body .container-fluid {
padding-left: 0;
padding-right: 0;
background-color:#ccc
}
.selection {
height: 50vh;
}
#kpop {
background: #7BECED;
}
#fashion {
background: #FFB5A7;
}
#martialarts {
background: #F3BB72;
}
#nature {
background: #B1DC76;
}
.no-padding{ padding-left: 0;
padding-right: 0;}
You can simply reset your margin and padding in .col-xs-6 to 0. Also, I dixed your markup - .row class should wrap .col-s classes. Take a look to Bootstrap documentation of grid system.
Here it is.
body .container-fluid {
padding-left: 0;
padding-right: 0;
}
.full-width {
margin: 0;
padding: 0;
}
.selection {
height: 50vh;
}
#kpop {
background: #7BECED;
}
#fashion {
background: #FFB5A7;
}
#martialarts {
background: #F3BB72;
}
#nature {
background: #B1DC76;
}
<div class="container-fluid">
<div class="row">
<div class="full-width col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div id="kpop" class="selection">
</div>
<!--kpop-->
<div id="fashion" class="selection">
</div>
<!--fashion-->
</div>
<!--first column-->
<div class="full-width col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div id="martialarts" class="selection">
</div>
<!--martial arts-->
<div id="nature" class="selection">
</div>
<!--nature-->
</div>
<!--second column-->
</div>
</div>
<!--container-->
Be careful, this changes can touch other divs in your page.
P.S It's better to create new class, for example full-width and give to it same rules. This will not broke your page. JSFiddle.
Hi I'm new in bootstrap and just trying to understand how the grid line works and making boxes on it. I don't know why does the style doesn't take effect.
Here is my code:
<div id="content" class="container">
<div class="row">
<div class="col-md-12 main ">
<h2>Welcome to Dashboard!</h2>
</div>
<div class="col-md-4 sidebar style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">
<h2>Sidebar</h2>
</div>
</div>
</div>
Your HTML is invalid, you should close class attribute quote, and add missing </div> tag. After all you also make sure that total sum of columns is exactly 12 per row. Something like this maybe:
<div id="content" class="container">
<div class="row">
<div class="col-xs-4 sidebar">
<h2>Sidebar</h2>
</div>
<div class="col-xs-8 main ">
<h2>Welcome to Dashboard!</h2>
</div>
</div>
</div>
Demo 1: http://plnkr.co/edit/YpfBDxXHrmGslzMUjEVh?p=preview
Here col-xs-4 + col-xs-8 fills 12 column row. col-xs- styles are effective starting from extra small dimensions and higher. You can of course make it more sophisticated, for example you want sidebar to take whole row pushing main content below it for xs devises:
<div class="row">
<div class="col-xs-12 col-sm-4 sidebar">
<h2>Sidebar</h2>
</div>
<div class="col-xs-12 col-sm-8 main">
<h2>Welcome to Dashboard!</h2>
</div>
</div>
Demo 2: http://plnkr.co/edit/YpfBDxXHrmGslzMUjEVh?p=preview
Consider this markup:
<div class="container">
<div class="row first">
<div class="col-lg-6 flush-col">
<div class="thumbnail-services">
<h3>Design</h3>
</div>
</div>
<div class="col-lg-6 flush-col">
<div class="thumbnail-services">
<h3>Design</h3>
</div>
</div>
</div>
<div class="row second">
<div class="col-lg-6 flush-col">
<div class="thumbnail-services">
<h3>Design</h3>
</div>
</div>
<div class="col-lg-6 flush-col">
<div class="thumbnail-services">
<h3>Design</h3>
</div>
</div>
</div>
</div>
And here is a fiddle
What I want is to remove the right border on those two last columns (last one on the first row and last one on the second row)
I've tried using this:
.thumbnail-services:last-child {border-right:0px;} but is not working.
Any idea what should I do to make this work with the css pseudo element :last-child ?
thumbnail-services is not the last child of the row, but flush-col (or the columns in general) are. Select these instead.
.flush-col:last-child .thumbnail-services
http://jsfiddle.net/C8buA/1/
Based on cale_b comment.
.thumbnail-services{border-right:1px solid black; border-bottom:1px solid black}
.row .col-lg-6:last-child .thumbnail-services{border-right:none;}
http://jsfiddle.net/smurphy/9v7tt/