I am a newbie, I have following structure
<div class="row bottom">
<div class="col-md-4">
<div class="row">
<img src="images/logo-main-bottom.png" />
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
</div>
</div>
</div>
</div>
How can I add/apply a CSS on all 'row' divs that comes under 'row bottom'?
a css rule for that would look like
.row.bottom .row{
//style
}
Take any one class row or bottom
.row{
//add required css
}
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 adapt a layout on Bootstrap that I got from the designer. Two columns in the content has a small spacing, that I couldn't achieve with direct column-spacing (as it gives too much gap). Thus, I tried wrapping everything into a row and adding sub-columns inside my main columns. Here in the code, it's more clear:
<div class="container">
<div class="col-md-12 banner"></div>
<div class="row">
<div class="col-md-8">
<div class="col-md-12 leftSide">
</div>
<div class="col-md-12 leftSide">
</div>
</div>
<div class="col-md-4 rightSide">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Now the spacing seems good but as I wrapped it in a row (I think), the right panel overflowed more then the banner.
It can be seen more clear on the fiddle: http://www.bootply.com/gMBrLvaK5C
The problem is the 'rightSide' panel.
How can I keep that spacing between 'leftSide' and 'rightSide', and fix the overflowing of the right column (because the spacing gets too much if I try achieving spacing with columns)? Or what is the best way to achieve that?
this is my personal solution, instead of add a class on the columns, create a div inside of a column, then you can place a div.banner and div.block like my example:
http://www.bootply.com/PEIiDnp9VD
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="banner"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="block"></div>
</div>
<div class="col-md-4">
<div class="block"></div>
</div>
</div>
</div>
if you want less space between the columns you can simply override Bootstrap col-md-* class by adding a class on the columns changing the padding left and right.
First of all, you need to follow proper wrapping of rows and columns. If you want consistency you need to make sure all columns are wrapped into a row.
<div class="row">
<div class="col-md-8 leftSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-4 rightSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Then apply custom margins and styling to elements inside of the columns, not columns themselves.
http://www.bootply.com/g6eLHRd1tH
I am trying to create a top header with HTML using div row. There should be one word on the left, and the other 3 words on the left; all within the row. However, result turns out to be all four words are on different rows stacked together. I can't find nothing wrong from my codes.
<div class="container-fluid">
<div class="row" style="background-color:orange; margin:-8px; margin-top:-20px">
<div class="col-md-1">
</div>
<div class="col-md-1">
<h3>stark</h3>
</div>
<div class="col-md-6">
</div>
<div class="col-md-1">
<h3>about</h3>
</div>
<div class="col-md-1">
<h3>portfolio</h3>
</div>
<div class="col-md-1">
<h3>contact</h3>
</div>
<div class="col-md-1">
</div>
The Bootstrap .row class is defining a left and right margin of -15px.
But you overwrite this with your margin: -8px; and that's why the columns don't fit anymore into the row.
Remove margin:-8px; margin-top:-20px and it will work.
I am assuming from the classes you are using, you are using Bootstrap. Ensure the bootstrap css and javascript files are referenced. Your html seems to work properly in this fiddle:
https://jsfiddle.net/e29aju5c/
<div class="container-fluid">
<div class="row" style="background-color:orange; margin:-8px; margin-top:-20px">
<div class="col-md-1">
</div>
<div class="col-md-1">
<h3>stark</h3>
</div>
<div class="col-md-6">
</div>
<div class="col-md-1">
<h3>about</h3>
</div>
<div class="col-md-1">
<h3>portfolio</h3>
</div>
<div class="col-md-1">
<h3>contact</h3>
</div>
<div class="col-md-1">
</div>
You should have the following code (or the equivalent code pointing to your bootstrap files) somewhere on the page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
I want my date picker to be in the middle of the page, eg. the line where I have: <div class="center-block text-center datepicker"></div>
Obviously center-block and text-center I tried already - but neither change anything. And with the offset it just makes it close to the centre without being perfectly centre aligned.
What do I need to do?
Thanks
<div class='row'>
<div class='col-sm-12'>
<div class='page-header page-header-with-icon mg-t'> <i class='fa-icon-calendar'></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
Try something like this:
<div class="col-sm-12">
<div class="datepicker"></div>
</div>
Then give the date picker something like:
.datepicker {
display:inline-block;
margin:0 auto;
}
I haven't tested this, but it would be where I would start.
style="text-align:center;" shall do the trick no? I tested and for me, the "CALENDAR" text is centered
<div class="col-sm-12">
<div class="page-header page-header-with-icon mg-t" style="text-align:center;">
<i class="fa-icon-calendar"></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
This is what should solve your problem. Add it somewhere in your custom stylesheet and change the width % to what suits your design.
.datepicker-inline {
width: 20%;
}
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/