I am creating lists that display in columns of two, every .customer-review-container has a margin-bottom like so:
<div class="col-md-6">
<div class="customer-review-container">
</div> <!-- end customer-review-container -->
</div>
<div class="col-md-6">
<div class="customer-review-container">
</div> <!-- end customer-review-container -->
</div>
<div class="col-md-6">
<div class="customer-review-container">
</div> <!-- end customer-review-container -->
</div>
<div class="col-md-6">
<div class="customer-review-container">
</div> <!-- end customer-review-container -->
</div>
What I wish to do is create an nth-child expression to remove the margin-bottom of on the last row (3rd and 4th), so I try with the code:
div:nth-child(3n+1).customer-review-container{
margin-bottom: 0;
}
But it only removes the margin-bottom of last div (4th).
This is what you need:
.col-md-6:nth-last-child(-n+2) .customer-review-container {
margin-bottom: 0;
}
Sample DEMO
div:nth-child(3n+1).customer-review-container, div:nth-child(3n+0).customer-review-container{
margin-bottom: 0;
}
you can use the nth-last-child(n) selector like so:
.customer-review-container:nth-last-child(-n+2) {
margin-bottom: 0;
}
this will select the last two children
Use:
div:nth-child(n+3) .customer-review-container{
margin-bottom: 0;
}
:nth-child(n+3) will target every div with an index superior or equal to 3 (indexes stars to 1).
EDIT:
If you want to target the last row, whatever if there's one or two elements, use this selector:
div:nth-last-child(-n+2):nth-child(odd) > .customer-review-container,
div:nth-last-child(-n+2):nth-child(odd) + div > .customer-review-container {
margin-bottom: 0;
}
Example:
.wrapper {
border: 1px solid red;
overflow: hidden;
}
.customer-review-container {
border: 1px solid black;
margin-bottom: 20px;
}
div:nth-last-child(-n+2):nth-child(odd) > .customer-review-container,
div:nth-last-child(-n+2):nth-child(odd) + div > .customer-review-container {
margin-bottom: 0;
background: blue;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="col-md-6">
<div class="customer-review-container">
Lorem
</div>
</div>
<div class="col-md-6">
<div class="customer-review-container">
Lorem
</div>
</div>
<div class="col-md-6">
<div class="customer-review-container">
Lorem
</div>
</div>
<div class="col-md-6">
<div class="customer-review-container">
Lorem
</div>
</div>
<div class="col-md-6">
<div class="customer-review-container">
Lorem
</div>
</div>
<div class="col-md-6">
<div class="customer-review-container">
Lorem
</div>
</div>
<div class="col-md-6">
<div class="customer-review-container">
Lorem
</div>
</div>
<div class="col-md-6">
<div class="customer-review-container">
Lorem
</div>
</div>
<div class="col-md-6">
<div class="customer-review-container">
Lorem
</div>
</div>
</div>
Related
I'm created blocks in WPBakery and have the following markup generated for a block (yeah, it's really messy, I know):
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="myCustomDiv">
<div class="container">
<div class="row">
<div class="col-12">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I'm trying to do is the apply padding: 0 to the first column in container-fluid (so wrapper > container-fluid > row > col-sm-12).
To do this, I have the following:
.container-fluid:first-of-type [class*=col-] {
padding: 0;
}
However, the above makes all col classes have padding: 0. How can. I only target the first col class under container-fluid?
You can literally use > selector straight from you own question:
/* You might want to be more specific after 'div',
but since it doesn't have any siblings it's sufficient */
.container-fluid > .row > div {
padding: 0;
}
Narrow down the elements to select by first-of-type and the parent class name to which it applies:
.container-fluid:first-of-type .myCustomDiv .container:first-of-type [class*=col-] {
padding: 0;
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="myCustomDiv">
<div class="container">
<div class="row">
<div class="col-12">
test1
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
test2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="container">
<div class="row">
<div class="col-12">
test3
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My understanding is that you can't use first-of-type with class names like this. See this answer for more info:
CSS3 selector :first-of-type with class name?
Now specifically with your case you have two issues – you don't want the change applied to either siblings or children of the first col- class, right? The work around shown in the link above is that you need to apply the style to the first div with that class, but then remove that styling for subsequent instances.
To find the further children use:
.container-fluid [class*=col-] [class*=col-]
To find the siblings use:
.container-fluid [class*=col-] ~ [class*=col-]
In the snippet below I've changed the styling to font color to make it easier to see.You'll see it's only applied to the first div with a 'col-' class name, and not to its children or siblings.
.container-fluid [class*=col-] {
color: red
}
.container-fluid [class*=col-] [class*=col-] {
color: black
}
.container-fluid [class*=col-] ~ [class*=col-] {
color: black
}
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
test
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="myCustomDiv">
<div class="container">
<div class="row">
<div class="col-12">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
test
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="myCustomDiv">
<div class="container">
<div class="row">
<div class="col-12">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try this:
UPDATE:
I suppose you are looking for this: ( this will select the first div from inside container-fluid which contains classes attribute that have col-sm ... if you want to select classes that contains just "col-", remove the sm
.container-fluid div[class*="col-sm"]:first-of-type {
padding: 10px;
}
I am trying to align the text "address" in left div vertically. But i am unable to.
Here is the code,
div.row {
border: 1px solid black;
padding: 10px;
}
.centre {
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row">
<!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row">
<!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row">
<!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
<!--row end-->
</div>
What am i doing wrong. I am using bootsrap 3.
Plunker: https://plnkr.co/edit/cu4ZJVSp3jYTyBwz4NKB?p=preview (View Plunker in full screen)
I am trying to have result similar to this. The coloured borders are only for representation .
You are setting the styles to the center div, instead it should be the label inside the center div
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="script.js"></script>
<style>
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre label{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
padding:5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div><!--row end-->
</div>
</body>
</html>
you can add this code in your CSS file to get vertical-align.
but first, you have to add a new class with row class
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="script.js"></script>
<style>
.vertical > div {
display: table-cell;
vertical-align: middle;
float: none;
}
.vertical > div {
display: table-cell;
vertical-align: middle;
float: none;
}
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre label{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
padding:5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row vertical">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div><!--row end-->
</div>
</body>
</html>
Here's a solution setting top margin/padding on columns not nested then cancelling top margin/padding in nested ones:
Plunkr
Relevant CSS:
[class*="col-"] {
border: 1px solid black;
padding: 10px;
}
.row:first-child [class*="col-"] {
margin-top: 10px;
background-color: lightgreen;
}
.row .row:first-child [class*="col-"] {
margin-top: -10px;
background-color: pink;
}
.row .row:not(:first-child) [class*="col-"] {
margin-top: 0;
background-color: lightblue;
}
Solution by #codegeek which avoids these problems is better imho :)
Code Pen
You can remove the offset and match it up to 12-grid system.
div.row {
border: 1px solid black;
padding: 10px;
}
.centre {
background: yellow;
top: 60px;
border: 1px solid blue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-3 centre">
<label>Address</label>
</div>
<div class="col-xs-8 col-sm-offset-1" style="border:1px solid green">
<!--You can remove style and remove offset and change it to sm-9 -->
<div class="row">
<!--nested row one-->
<div class="col-xs-6">
<label>Street</label>
</div>
<div class="col-xs-6">
<input name="stname">
</div>
</div>
<div class="row">
<!--nested row two-->
<div class="col-xs-6">
<label>Landmark</label>
</div>
<div class="col-xs-6">
<input name="lmark">
</div>
</div>
<div class="row">
<!--nested row three-->
<div class="col-xs-6">
<label>Zip code</label>
</div>
<div class="col-xs-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
<!--row end-->
</div>
As for now, margin-top is a worth option trying.
I positioned the left div by using top: 50%(takes the height of the parent) and then using translateY, which takes the height of the current element.
Since relative positioning didnt take % values, I have used absolute.
But giving absolute makes the div come out of the document flow, hence used "left" for the right sibling with the width of the left sibling.
.parent{
position: relative;
}
.centre{
background: yellow;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.right{
left: 25%;
/* width of left sibling, since col-md-3 is 25%*/
background: lightgreen;
}
Plnkr Link(with bootstrap) or JsFiddle (without Bootstrap)
Result:
Your vertical-align:middle doesn't work, because elements with display: block cannot be centered that way. An easy alternative would be to use display: flex.
Here is a snippet to demonstrate the way display:flex can be used to center pretty much everything:
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
}
.flex {
display: flex;
align-items: center;
}
<div class="container-fluid">
<div class="row">
<div class="flex">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
</div><!--row end-->
</div>
EDIT: maybe this guide might be of interest for you:
Centering in CSS: A Complete Guide
I can't get the colors to show up in chrome. I've tried switching the order of the files in <link> just in case that is the problem. I don't see any reason why the colors are'nt showing up in chrome.
.header {
background-color: white;
}
.body {
background-color: blue;
}
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="headertext">
<h1> ROBIN HOBB </h1>
</div>
</div>
<div class="col-md-4">
<div class="facebookbuttons"></div>
<div class="fantasy_text"></div>
</div>
</div>
</div>
</div>
<div class="body">
<div class="container"></div>
</div>
Your .body class DIV doesn't have any content. If you put some text into it, you see the blue background:
(and since the browser windows background is white by default, you won't see the white background on your .header DIV...)
.header {
background-color: white;
}
.body {
background-color: blue;
}
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="headertext">
<h1> ROBIN HOBB </h1>
</div>
</div>
<div class="col-md-4">
<div class="facebookbuttons"></div>
<div class="fantasy_text"></div>
</div>
</div>
</div>
</div>
<div class="body">
<div class="container">Here is some content</div>
</div>
.header {
background-color: white;
}
body {
background-color: blue;
}
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="headertext">
<h1> ROBIN HOBB </h1>
</div>
</div>
<div class="col-md-4">
<div class="facebookbuttons"></div>
<div class="fantasy_text"></div>
</div>
</div>
</div>
</div>
<div class="body">
<div class="container"></div>
</div>
I assume you are trying to change the entire page background color which needs to be done with a body { ... } selector not .body{ ... } as in this sample.
However, if the goal is to target the with a class of body your CSS is correct but there is nothing inside for content so it has a height of 0 by default. Add content like Johannes mentioned and it should work for you.
I know this may be easy for most of you but I'm stuck with this issue.
I need to implement this design:
Layout Design
... and for now I've got this Current layout.The general structure is a row with col-3 and col-9, this col-9 has two rows, one for name and job title, and the other one for statistics in the page (col-3 for each of them). I need them to fill the height of his parent, but height property doesn't work. Which could be a clean solution? Thanks a lot.
Here is the structure, it's pretty simple tho.
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img ...>
<span>..</span>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">...</h2>
<h4 class="text-muted">...</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 stat">
<h3>...</h3>
<small>...</small>
</div>
...
</div>
</div>
Use position: relative on the parent and then position:absolute; bottom: 0; on the children.
Nice explanation there.
Flexbox would be my recommendation although CSS tables might be an option too.
Codepen Demo
Snippet Demo (view Fullscreen)
.user-image {
background: pink;
}
.user-image img {
display: block;
margin: auto;
}
.profile-header {
display: flex;
}
.right {
background: #c0ffee;
display: flex;
flex-direction: column;
}
.stats {
margin-top: auto;
}
.stat {
background: lightgrey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img src="http://www.fillmurray.com/300/200" alt="" />
<span>User Ranking</span>
</div>
<div class="col-md-9 right">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">User Name</h2>
<h4 class="text-muted">reference</h4>
</div>
</div>
<div class="row text-center stats">
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
</div>
</div>
I have the following html:
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="phone-and-email">
<p>+44 (0)7950 123 456 info#example.co.uk</p>
</div>
</div>
<div class="col-md-10">
<div class="icons">
<div class="row">
<div class="col-md-4">
<img src="images/info.png" class="pull-left"/>
<p>How to buy</p>
</div>
<div class="col-md-4">
<img src="images/delivery.png" class="pull-left"/>
<p>Free Delivery</p>
</div>
<div class="col-md-4">
<img src="images/gift.png" class="pull-left"/>
<p>Gift Vouchers</p>
</div>
</div>
</div>
</div>
</div>
</div>
css:
.phone-and-email, .icons {
border-top: 2px black solid;
border-bottom: 2px black solid;
}
I can't make the left column the same height as the right, and I have tried about 5 different solutions. It does work using javascript but I'd rather use css if possible.
How it looks:
How it should look:
One possible solution is to make use of display table for the row and table-cell to achieve the equal height of both grid sections.
Check this bootply.
HTML:
<div class="container">
<div id="onerow" class="row">
<div class="col-md-2 sameheight">
<div class="phone-and-email">
<p>+44 (0)7950 123 456 info#example.co.uk</p>
</div>
</div>
<div class="col-md-10 sameheight icons">
<div>
<div class="col-md-4">
<img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left">
<p>How to buy</p>
</div>
<div class="col-md-4">
<img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left">
<p>Free Delivery</p>
</div>
<div class="col-md-4">
<img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left">
<p>Gift Vouchers</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.phone-and-email, .icons {
border-top: 2px black solid;
border-bottom: 2px black solid;
}
img{
height:20px;
width:20px;
}
#onerow{
display: table;
}
.sameheight {
float: none;
display: table-cell;
vertical-align: top;
}