Code
<div class="row mgu-w-tdw-brow">
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div>
</div>
CSS
.mgu-w-tdw-brow div.mgu-w-tdw-box:first-child { border: 2px solid green; }
I'd like to approach the first element of "mgu-w-tdw-box" inside the row "mgu-w-tdw-brow". Unfortunately this doesn't work.
thanks for help.
this is what you need, first select div:first-child and style inside div
.mgu-w-tdw-brow div:first-child .mgu-w-tdw-box {
border:2px solid green;
}
<div class="row mgu-w-tdw-brow">
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div>
</div>
</div>
I would prefer a better readable version which does the same for this example.
.mgu-w-tdw-brow >:first-child {
border: 2px solid green;
}
Here is a jsfiddle for it.
.mgu-w-tdw-brow [class*="col"]:nth-child(1) .mgu-w-tdw-box{
border:solid 2px #000;
}
<div class="row mgu-w-tdw-brow">
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div>
</div>
</div>
Related
I want to align these elements in mobile view
I want that on mobile devices the images are on top of the text and not on the side.
<div class="container">
<div class="row vcenter">
<div class="col-xs-12 col-sm-6 col-md-2">
<h3>Why Us?</h3>
</div>
<div class="col-xs-12 col-sm-6 col-md-10 items_why">
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/destination_expert.png">
<span>Destination Expert</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/faster.png">
<span>Faster</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/transparent.png">
<span>Transparent</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/cheaper.png">
<span>Cheaper</span>
</div>
</div>
</div>
</div>
The <div>s containing <span>s should be contained in another row so they can be part of another grid within the grid.
<div class="container">
<div class="row vcenter">
<div class="col-xs-12 col-sm-12 col-md-2">
<h3>Why Us?</h3>
</div>
<div class="col-xs-12 col-sm-12 col-md-10">
<div class="row">
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/destination_expert.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Destination Expert</span>
</div>
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/faster.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Faster</span>
</div>
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/transparent.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Transparent</span>
</div>
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/cheaper.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Cheaper</span>
</div>
</div>
</div>
</div>
</div>
You can try it here: https://www.bootply.com/new
I've tried many ways to code but none of them works. The 3 products are listed vertically in one column. But I have no idea on how to separate the the following <div> containing 6 others product into different columns beside it. Can you help me to solve this?
Or, in other ways, can the <div> is actually aligned into 3 products per row, not in column?
<div class="products-right-grids-position1">
<h4>BUN BOY Bakery</h4>
<p>Best Bakery in Town </p>
<p> </p>
</div>
</div>
</div>
<div class="products-right-grids-bottom">
<div class="col-md-4 products-right-grids-bottom-grid">
<?php
echo getPros();
?>
<?php
echo getBreadPros();
?>
</div>
<div class="clearfix"> </div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
</div>
I am trying to make a layout with three equal columns. In the third column I want two rows of two boxes of equal width. For some reason, the columns are not covering 1/3 width but rather the entire page width. I included my HTML and relevant CSS below.
<div id="about-me" class="container">
<div class="row">
<div class="sm-col-4 md-col-4 lg-col-4 xl-col-4"></div>
<div class="sm-col-4 md-col-4 lg-col-4 xl-col-4"></div>
<div class="sm-col-4 md-col-4 lg-col-4 xl-col-4">
<div class="row">
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
</div>
<div class="row">
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
</div>
</div>
</div>
</div>
Here is the CSS:
#about-me {
height: 100vh;
}
.simple-image-box {
height: 50px;
padding: 10px;
width: 40%;
color: cadetblue;
}
You wrote type-col-number instead of col-type-number.
HTML:
<div id="about-me" class="container">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
</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