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/
Related
I am making a project based on the grid. I am using bootstrap, CSS, and HTML for making the grid. I need to display a grid like this Image. But the row span is not working properly. I am using fully div structure, not the table. My code is:
`
<div>
<div class="row">
<div class="col-md-4">
</div>
</div>
<div class="col-md-4">
</div>
<div rowspan="2" class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
`
First I would suggest using indenting to make it more readable.
You would just create 3 columns next to each other and in the middle one start a new row.
In the code example I create 1 row and 2 columns that are full width, you could also just create 2 rows.
<div class='container'>
<div class='row'>
<div class='col-4 col1'>1</div>
<div class='col-4'>
<div class='row'>
<div class='col-12 col2'>2</div>
<div class='col-12 col3'>3</div>
</div>
</div>
<div class='col-4 col4'>4</div>
</div>
</div>
https://codepen.io/anon/pen/XOYZRG?editors=1100
Use class="short-div" at col-md-6 in both the div. Remove col-md-6 from both the div, also remove rowspan.
I think it is something simple, but as i'm new to bootstrap I don't know how to do it, I searched and didn't find anything about it.
I want the columns to take 100% the width of the row, I marked the row with a red border in the example below.
I know it's the padding of the columns that give this spacing but I have not figured out a way to remove the padding keeping the spacing between the columns and making them fill the row.
JSFiddle
.box {
height: 100px;
margin-bottom: 20px;
border: 1px solid rgba(0,0,0,0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="margin-top:40px;margin-bottom:40px;border-right: 1px solid red;border-left: 1px solid red;">
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box"></div>
</div>
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box"></div>
</div>
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box"></div>
</div>
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box"></div>
</div>
</div>
</div>
Change your class from container to container-fluid:
<div class="container-fluid">
...
</div>
More about it here
remove class "container. and then try you will get full width row.
To remove the space between columns in you row, in bootstrap 4, you can use no-gutters like this:
<div class="row no-gutters">
...
</div>
Try This
nest row inside row
HTML
<div class="container">
<div class="row">
<div class="row">
<div class="col-*-*">
<div class="products">
.......
</div>
</div>
</div>
</div>
</div>
Link For reference
hope this helps..
you should use 100% of all div width if problem solved well and good otherwise you can use left and right margins in (-) minus.
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
In the bootstrap grid system, there are 12 columns and col - *- * class is used to group together certain number of columns. But when I want to use the first 3 columns and then just the last column how do I do that, that is, how can I use certain columns and not others in a single row class?
Like when I make a page header, I give the title on the left hand side and certain other text on the right side of the header, I assume I can use the grid system here effectively, given that I can access certain columns.
Use the .offset-* class (.col-md-offset-* class for versions older than 4.0.0). For instance, occupy first 4 cols, and only the last 2 cols as follows:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 offset-md-6">.col-md-6 .offset-md-2</div>
</div>
Bootstrap v4.0.0-alpha.6
.b { background: #CCC; height: 80px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="b col-sm-4"></div>
<div class="b offset-sm-6 col-sm-2"></div>
</div>
</div>
Bootstrap v3.3.7
.b { background: #CCC; height: 80px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="b col-xs-4"></div>
<div class="b col-xs-offset-6 col-xs-2"></div>
</div>
</div>
First create 3 columns, then 8 columns, after that create the last column and you write the code in only first three and last one like this. think of it like a graph sheet.
<div class="col-md-3">
<!-- things you want in first three columns: code here-->
</div>
<div class="col-md-8">
<!-- leave this blank-->
</div>
<div class="col-md-1">
<!-- things you want in last column : code here-->
</div>
Use with col-md-offset-*.
like this
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
If you want three column next to each other and only use the last one you can simply just put in content in the last one like this:
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4">Content here</div>
</div>
If I understand your question correctly, you want to be able to single out specific columns in your row of 12.
<div class='row'>
<div id='first' class='col-sm-4'>
<p>Column 1</p>
<div>
<div id='second' class='col-sm-4'>
<p>Column 2</p>
<div>
<div id='third'class='col-sm-4'>
<p>Column 3</p>
<div>
</div>
If you want to select specific columns, you could give them an id to uniquely identify them. If you would want to select the first and third column and change their background color to lightblue you could do this:
#first, #third{
background-color: lightblue;
}
You will have to use the .col-[xs|md|lg|xl]-offset-* classes in bootstrap, see here
For example, if you want the layout of your page to have only the first 3 columns and the last column containing elements just do:
<div class="row">
<div class="col-md-3">
<span>some text</span>
</div>
<div class="col-md-offset-8 col-md-1">
<span>some more text</span>
</div>
</div>
<div>
<div class="col-md-3" style="text-align:left">
<h1>Title</h1>
</div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3" style="text-align:right">
<p>Description</p>
</div>
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
}