I have a bootstrap grid layout with ads, and I needed to add a banners row in it. I found a way to do it by adding a container between ads and the banners inside them with a separate row. But now I have a problem that you can see in the picture.
Is there a way to have the ads positioned better and avoid un-used empty space?
Note1: The columns number is responsible to screen size.
Note2: Banners number in a row is responsible for columns number (with d-none trick)
<div class="container">
<div class="row">
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="container">
<div class="row">
<div class="col-3 banner">Banner</div>
<div class="col-3 banner">Banner</div>
<div class="col-3 banner d-sm-none d-md-block">Banner</div>
<div class="col-3 banner d-sm-none d-md-block">Banner</div>
</div>
</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
</div>
</div>
As your are using 4 columns in each row, you need put ad columns in a separate row. Bootstrap grid system works on 12 column layout. So each row must have columns that sums up to 12. You can have any combination of columns such as .col-md-4, .col-md-4 and .col-md-4 in one row.
No need to take separate container for ad banners.
Try below code.
<div class="container">
<div class="row">
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
</div>
<div class="row">
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
</div>
<!-- Ad banners-->
<div class="row">
<div class="col-3 banner">Ad banner</div>
<div class="col-3 banner">Ad banner</div>
<div class="col-3 banner">Ad banner</div>
</div>
<div class="row">
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
</div>
</div>
Related
I want to display two columns display for all screen sizes and the code does not working in small screen size. I use bootstrap grid system and I don't know why it is not working as I excepted.
<div class="app-content content container-fluid">
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body"><!-- stats -->
<div class="row match-height">
<div class="col-xl-6 col-lg-6">
<div class="card">
<div class="card-header">
</div>
<div class="card-body">
<div class="card-block">
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Air Tempeature
</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Soil Temperature
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Air Tempeature
</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Soil Temperature
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Air Tempeature
</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Soil Temperature
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
everyone, I'm trying to add a grid of products to my website with description. something Grid View like this? How would I do it? Any help?
You can use the bootstrap Grid System.
<div class="fluid-container">
<div class="row">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
</div>
<div class="row">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
</div>
</div>
Quick Bootstrap CDN
Have you linked bootstrap to your project?
if you do they have a good and easy to use grid system.
bootstrap grid system
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>
I have a form that contains several rows, but one of them is disappearing.
The source code looks like this:
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
</div>
</div>
<div class="row"><!--this row dissapears-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"><!--this div is gone-->
<h1>thing2</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
...
</div>
</div>
As far as I can tell this code looks fine, but this is what it turns into when it gets displayed.
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
<h1>thing2</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
...
</div>
</div>
This makes thing1 and thing2 appear together and not on their own row, and I have no idea why.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
</div>
</div>
<div class="row"><!--this row dissapears-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"><!--this div is gone-->
<h1>Row that disappears.</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
Last Row
</div>
</div>
The code doesn't seem to have any problem #Trevor. I just implemented it and it works well according to me. Let me know if i have misinterpreted your problem.
This code works fine. please check your css file or bootstrap library.
please use bootstrap cdn link.
Turns out my issue was not bootstrap at all. Thanks everyone for mentioning you can't reproduce it, made me dig deeper. The issue turns out to be what was in the div. It was an angular select element with a self closing tag. Changing it to a normal closing tag fixed everything. I excluded it because I thought it was not important and didn't verify before posting.
I have three divs as described in the image...i want to change the location of divs as they go responsive...
Is it possible to do so? and how?
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-1</h3></div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-2</h3></div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-3</h3></div>
</div>
</div>
By using the Bootstrap defaults you would like to push and pull columns by simply adding some additional classes to them.
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-xs-6 text-center"><h3 class="border">Div-1</h3></div>
<div class="col-sm-4 col-xs-6 col-sm-push-4 text-center"><h3 class="border">Div-3</h3></div>
<div class="col-sm-4 col-xs-12 col-sm-pull-4 text-center"><h3 class="border">Div-2</h3></div>
</div>
The point is to move the 3rd col to swap places with the 2nd col, since the 2nd will be at the bottom when it goes down to mobile. Using .col-sm-pull and .col-sm-push will grant you the ability to move columns around easily without breaking anything with unnecessary float styling or anything else.
Refer to Bootstrap's official guide to column ordering.
<div class="container-fluid">
<div class="row">
<div class="first col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-1</h3></div>
<div class="second col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-2</h3></div>
<div class="third col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-3</h3></div>
</div>
</div>
#media only screen and (max-width:990px) and (min-width:320px){
.first, .third{
float:left;
width:48%;
}
.second {
width:100%;
float:right;
display:block;
clear:both;
}
}
This works,
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-1</h3></div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-2</h3></div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 text-center "><h3 class="border">Div-3</h3></div>
</div>
</div>
You could use http://www.w3schools.com/cssref/sel_nth-child.asp if your element hasn´t any unique id or class.
and
float: right;
As long as
#media only screen and (max-width: 990px) and (min-width:320px)
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center">
<h3 class="border">Div-1</h3>
</div>
<div class="hidden-sm hidden-xs col-md-4 col-lg-4 text-center">
<h3 class="border">Div-2</h3>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center">
<h3 class="border">Div-3</h3>
</div>
<div class="hidden-lg hidden-md col-xs-12 col-sm-12 visible-sm-block visible-xs-block text-center">
<h3 class="border">Div-2</h3>
</div>
</div>
</div>
http://getbootstrap.com/css/#responsive-utilities
Is it even possible and how can I create a bootstrap grid that's 3x3 for md columns. 6x2 for sm columns and 9x1 for xs columns?
3x3 to 9x1 seems to be easy.
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-12 col-md-4'>1</div>
<div class='col-xs-12 col-md-4'>2</div>
<div class='col-xs-12 col-md-4'>3</div>
</div>
<div class='row'>
<div class='col-xs-12 col-md-4'>4</div>
<div class='col-xs-12 col-md-4'>5</div>
<div class='col-xs-12 col-md-4'>6</div>
</div>
<div class='row'>
<div class='col-xs-12 col-md-4'>7</div>
<div class='col-xs-12 col-md-4'>8</div>
<div class='col-xs-12 col-md-4'>9</div>
</div>
</div>
But I can't figure out how to create the 6x2 in between.
unska try this
HTML
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>1</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l'>2</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>3</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l'>4</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>5</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l'>6</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>7</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l'>8</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>9</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l visible-sm'>10</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray visible-sm'>11</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l visible-sm'>12</div>
</div>
</div>
css
.gray{background-color:#ccc}
.gray-l{background-color:#ececec}
Check this fiddle
You can place all these columns in one row.
Simply add col-sm-6 to each div and the third column will automatically shift to the next row.
You're basically already doing something similar for the xs-size.
Keeping the one row around all these columns, allows for the styling around them to stay intact.
Try this to see if it helps.
View this large view Fiddle and resize it to see how Bootstrap works.
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 bg-orange block clear">6 x 6 <br> These will stay like this all the way down to xs size</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 bg-primary block clear"></div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bg-orange block clear">3 x 3</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bg-primary block clear"></div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 bg-orange block clear"> 6 x 2</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 bg-primary block clear"></div>
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bg-orange block clear">9 x 9</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 bg-primary block clear"></div>
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-6 col-md-3 col-sm-6 col-xs-9 bg-orange block clear">6 x 6 lg then change to 3 x 3 at md, then change to 6 x 2 at sm and then change at xs to 9 x 1.</div>
<div class="col-lg-6 col-md-3 col-sm-2 col-xs-1 bg-primary block clear"></div>
</div>