I have this code in a bootstrap project and I can't put responsive divs side by side with no margins between them. Can anyone help me?
Here is my code:
.container-vip {
width: 100%;
height: 300px;
background: #09C;
border: 1px solid #fff;
padding: 0;
margin: 0;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="container-vip">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="container-vip">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="container-vip">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="container-vip">
</div>
</div>
</div>
They are not margins, it is padding, and you can remove it using padding: 0px on your col-* divs.
You just need add a class to your div like
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 no-padding">
<div class="container-vip">
</div>
</div>
and add css for it in your own .css file
.no-padding{padding: 0 !important;}
and of course you can give your own name instead of "no-padding"
Add this rule to the bottom of your custom css file
.col-xs-6, .col-sm-6, .col-md-3, .col-lg-3{
background:red;
padding:0px;
}
Related
I am trying to make a dice with the help of bootstrap grid. Although I am not done with it yet, here is small snippet of code containing what I have written. When I am inspecting my webpage using dev tools (picture attached), my container-fluid div which basically includes all my code is not displaying to contain the box divs?
Can you explain me why so?
I have attached my HTML and CSS code as well.
body {
background-color: rgb(41, 36, 36);
text-align: center;
font-family: 'Bungee Spice', cursive;
margin: auto;
}
h2 {
margin-bottom: 10%;
margin-top: 10%;
}
.result {
font-size: 500%;
margin: 5% auto;
}
.box {
width: 60%;
height: 180%;
/* padding-bottom: 60%; */
background-color: yellow;
margin: auto;
border-radius: 10%;
}
.container-fluid {
margin-bottom: 5%;
}
/* .circle1 {
background-color: black;
width: 100%;
height: 100%;
border-radius: 50%;
} */
/* .box-row {
width: 100%;
padding-bottom: 10%;
margin: auto;
background-color: red;
} */
#media (max-width: 1300px) {
.result {
font-size: 400%;
}
}
#media (max-width: 1100px) {
.result {
font-size: 300%;
}
}
#media (max-width: 991px) {
button {
display: block;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap" rel="stylesheet">
<h1 class="result">Welcome, <span class="playerName"></span></h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3"></div>
<div class="col-lg-3 col-md-3 col-sm-3">
<h2>You</h2>
<div class="box">
<div class="row box-row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle1"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle2"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle3"></div>
</div>
</div>
<div class="row box-row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle4"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle5"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle6"></div>
</div>
</div>
<div class="row box-row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle7"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle8"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle9"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<h2>Computer</h2>
<div class="box">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle1"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle2"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle3"></div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle4"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle5"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle6"></div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle7"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle8"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle9"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3"></div>
</div>
</div>
<button type="button" class="btn btn-outline-warning">Roll</button>
I see you have commented out the only style that would apply to the dots inside of the yellow boxes, but in general, the issue is that the bootstrap grid doesn't inherit any height, and the height: 100% that you have defined comes out as 0. If you would change the .circle1 height to a fixed size or apply a height to the dots row, then it would show up.
I started to learn Bootstrap since few days, and I am facing a problem about horizontal alignment.
In my exemple below, I want to distribute equitably the three divs "first", "second" and "third" on the screen, but it doesn't work.
<div class="container">
<div class="row justify-content-between">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third"></div>
</div>
</div>
</div>
Nevertheless, "justify-content-between" doesn't change anything...
Does anyone could help me?
If your using boostrap 4.1.1
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css
.row is used
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
so you can just use,
<div class="container">
<div class="row ">
<div class="col-12 col-md-4 first">
<div class="text-center">
first 1
</div>
</div>
<div class="col-12 col-md-4 second">
<div class="text-center">second<br>second</div>
</div>
<div class="col-12 col-md-4 third">
<div class="text-center">third<br>third<br>third</div>
</div>
</div>
</div>
Further follow https://getbootstrap.com/docs/4.1/layout/grid/
Use only the col class instead of all the other col-* classes for the three columns.
.first,
.second,
.third {
height: 500px;
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<div class="first"></div>
</div>
<div class="col">
<div class="second"></div>
</div>
<div class="col">
<div class="third"></div>
</div>
</div>
</div>
You should not use fixed height. I have used just to show that the divs are aligned at the center.
Visit this link for more info
Update
If the content of the columns are img as you have commented that they are, then you should do this:
Use only col-12 and col-md-4. col-12 covers col-sm-12. And col-md-4 covers col-lg-4 also.
For the images, use img-fluid, d-block, and mx-auto classes.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12 col-md-4 ">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ward_Cunningham_-_Commons-1.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 ">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/HNL_Wiki_Wiki_Bus.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/96/History_Comparison_Example_%28Vector%29.png" class="img-fluid d-block mx-auto" alt="">
</div>
</div>
</div>
Check this pen
Update
In order to add space on the left and right side of the images, use px-5 for the columns.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ward_Cunningham_-_Commons-1.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/HNL_Wiki_Wiki_Bus.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/96/History_Comparison_Example_%28Vector%29.png" class="img-fluid d-block mx-auto" alt="">
</div>
</div>
</div>
Check this pen
if you still need more space, use custom css.
.px-10 {
padding-left: 120px;
padding-right: 120px;
}
what i understood from that image that you sent that mean you already defined width and height for those divs and if you want to center those divs into the col you have to use margin:auto
PLEASE open the snippet in a full page mode to see it clearly
i just make a snippet to show you 2 cases the first case if you dont use fixed width it will take the col width as you define it here col-12 col-sm-12 col-md-4 col-lg-4" but once you use fixed width then you have to center the div with margin:auto
.row {
background-color: #eee;
}
.first {
height: 100px;
/* width: 100px; */
background-color: red;
}
.second {
height: 100px;
/* width: 100px; */
background-color: blue;
}
.third {
height: 100px;
/* width: 100px; */
background-color: green;
}
.first2 {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
.second2 {
height: 100px;
width: 100px;
background-color: blue;
margin: auto;
}
.third2 {
height: 100px;
width: 100px;
background-color: green;
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-between">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third"></div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first2"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second2"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third2"></div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first3"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second3"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third3"></div>
</div>
</div>
</div>
I'm building a grid structure and I have changed the bootstrap container classes to new dimension which is working fine. I am currently trying to achieve the layout below and have gotten this far. Each column has a background image. I am trying to put another col-md-3 in the black section but have had no luck. Any suggestions?
My HTML
<div class="container">
<div class="row">
<div class="col-sm-6 col-sx-6 col-md-3 col-lg-3 boats-row">
</div>
<div class="col-md-3 home-row-red">
</div>
<div class="col-md-6 col-sm-12 home-row-big">
</div>
</div>
</div>
CSS
.boats-row {
max-height: 720px;
height: 100%;
height: 720px;
background: url(img/boats.png);
background-size: cover;
}
.home-row-red {
height: 360px;
background: red;
max-height: 360px;
}
.home-row-big {
height: 720px;
max-height: 720px;
background: url(img/panel-large.png);
background-size: cover;
}
And something like this?
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="col-sx-6 col-sm-6 col-md-6 boats-row ">
</div>
<div class="col-sx-6 col-sm-6 col-md-6 home-row-red">
</div>
<div class="col-sx-6 col-sm-6 col-md-6 home-row-blue">
</div>
</div>
<div class="col-md-6 col-sm-12 home-row-big">
</div>
</div>
I want to create equal padding with all div under the .slideshow div. The problem is the last div right padding.
Now looks like this:
I want this, just with equal padding / space between divs and equal img heights:
The code:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="product-container">
<div class="slideshow">
<p>Test message, Test message</p>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
</div>
</div>
</div>
CSS:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.product-container{
padding: 0px 9%;
}
.slideshow{
background-color: #efeff1;
border: 1px solid #c5c5c7;
overflow: hidden;
}
.product-container img{
width:100%;
}
.col-lg-3{
padding-right:12px;
padding-left:0px;
}
Fiddle:
Fiddle
Just wrap all your image containing divs in additional .row:
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
And remove unnecessary styling:
.col-lg-3{
padding-right:12px;
padding-left:0px;
}
Also, you don't need to repeat responsive classes for all devices:
<div class="col-sm-3 col-md-3 col-lg-3"></div>
Can be written:
<div class="col-sm-3"></div>
Updated fiddle
Is this what you're trying to acheive?
.product-container {
padding: 0 2px 6px 2px;
overflow: hidden;
}
.slideshow {
background-color: #efeff1;
border: 1px solid #c5c5c7;
padding-left: 20px;
}
.product-container img {
width: 100%;
}
.product-container .pads {
padding: 0px 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="col-lg-12">
<div class="product-container">
<div class="row">
<div class="slideshow">
<p>Test message, Test message</p>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
</div>
</div>
</div>
I used the last-child selector. "Bla" is a class I added to the divs in question
.bla:last-child{
padding-right:0px ;
}
Had some issues with the height but used display: flex; to deal with that.
This wont work well in older browsers
http://jsfiddle.net/52VtD/12065/
If the right padding is removed it will have the result you are looking for.
http://jsfiddle.net/0rm0h547/light/
http://jsfiddle.net/0rm0h547/show/
css
.continuous {
padding-right: 0px;
}
html
..
<div class="col-sm-3 col-md-3 col-lg-3 continuous">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
..
Add an extra css class that removes padding-right.
You can give padding-right:0px; and you will get wat you want.
http://jsfiddle.net/52VtD/12070/
.col-lg-3{
padding-right:0px;
padding-left:0px;
}
Try:
remove
.col-lg-3{
padding-left:12px;
padding-right:0px;
}
add
.product-container .col-lg-3
{
padding-left:0px;
padding-right:0px;
}
I am having trouble to put in horizontal and vertical lines on my website. Not sure what's wrong with this.
I tried using borders but I am not sure if I am doing it right.
I would like to achieve a criss-cross dividers just like the below image:
Here's what my code looks like:
<div class="container-liquid" style="margin:0px; padding: 0px">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="one"><h5>Rich Media Ad Production</h5><img src="images/richmedia.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="two"><h5>Web Design & Development</h5> <img src="images/web.png" ></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="three"><h5>Mobile Apps Development</h5> <img src="images/mobile.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan" id="four"><h5>Creative Design</h5> <img src="images/mobile.png"> </div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="five"><h5>Web Analytics</h5> <img src="images/analytics.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="six"><h5>Search Engine Marketing</h5> <img src="images/searchengine.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="seven"><h5>Mobile Apps Development</h5> <img src="images/socialmedia.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan" id="eight"><h5>Quality Assurance</h5> <img src="images/qa.png"></div>
<hr>
</div>
</div>
Do you have to use Bootstrap for this? Here's a basic HTML/CSS example for obtaining this look that doesn't use any Bootstrap:
HTML:
<div class="bottom">
<div class="box-content right">Rich Media Ad Production</div>
<div class="box-content right">Web Design & Development</div>
<div class="box-content right">Mobile Apps Development</div>
<div class="box-content">Creative Design</div>
</div>
<div>
<div class="box-content right">Web Analytics</div>
<div class="box-content right">Search Engine Marketing</div>
<div class="box-content right">Social Media</div>
<div class="box-content">Quality Assurance</div>
</div>
CSS:
.box-content {
display: inline-block;
width: 200px;
padding: 10px;
}
.bottom {
border-bottom: 1px solid #ccc;
}
.right {
border-right: 1px solid #ccc;
}
Here is the working Fiddle.
UPDATE
If you must use Bootstrap, here is a semi-responsive example that achieves the same effect, although you may need to write a few additional media queries.
HTML:
<div class="row">
<div class="col-xs-3">Rich Media Ad Production</div>
<div class="col-xs-3">Web Design & Development</div>
<div class="col-xs-3">Mobile Apps Development</div>
<div class="col-xs-3">Creative Design</div>
</div>
<div class="row">
<div class="col-xs-3">Web Analytics</div>
<div class="col-xs-3">Search Engine Marketing</div>
<div class="col-xs-3">Social Media</div>
<div class="col-xs-3">Quality Assurance</div>
</div>
CSS:
.row:not(:last-child) {
border-bottom: 1px solid #ccc;
}
.col-xs-3:not(:last-child) {
border-right: 1px solid #ccc;
}
Here is another working Fiddle.
Note:
Note that you may also use the <hr> element to insert a horizontal divider in Bootstrap as well if you'd like.
The <hr> should be placed inside a <div> for proper functioning.
Place it like this to get desired width
`
<div class='row'>
<div class='col-lg-8 col-lg-offset-2'>
<hr>
</div>
</div>
`
Hope this helps a future reader!
Add the right lines this way and and the horizontal borders using HR or border-bottom or .col-right-line:after. Don't forget media queries to get rid of the lines on small devices.
.col-right-line:before {
position: absolute;
content: " ";
top: 0;
right: 0;
height: 100%;
width: 1px;
background-color: #color-neutral;
}
I know this is an "older" post. This question and the provided answers helped me get ideas for my own problem. I think this solution addresses the OP question (intersecting borders with 4 and 2 columns depending on display)
Fiddle:
https://jsfiddle.net/tqmfpwhv/1/
css based on OP information, media query at end is for med & lg view.
.vr-all {
padding:0px;
border-right:1px solid #CC0000;
}
.vr-xs {
padding:0px;
}
.vr-md {
padding:0px;
}
.hrspacing { padding:0px; }
.hrcolor {
border-color: #CC0000;
border-style: solid;
border-bottom: 1px;
margin:0px;
padding:0px;
}
/* for medium and up */
#media(min-width:992px){
.vr-xs {
border-right:1px solid #CC0000;
}
}
html adjustments to OP provided code. Red border and Img links for example.
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="one">
<h5>Rich Media Ad Production</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" />
</div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-xs" id="two">
<h5>Web Design & Development</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<!-- hr for only x-small/small viewports -->
<div class="col-xs-12 col-sm-12 hidden-md hidden-lg hrspacing"><hr class="hrcolor"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="three">
<h5>Mobile Apps Development</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-md" id="four">
<h5>Creative Design</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<!-- hr for for all viewports -->
<div class="col-xs-12 hrspacing"><hr class="hrcolor"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="five">
<h5>Web Analytics</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-xs" id="six">
<h5>Search Engine Marketing</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<!-- hr for only x-small/small viewports -->
<div class="col-xs-12 col-sm-12 hidden-md hidden-lg hrspacing"><hr class="hrcolor"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="seven">
<h5>Mobile Apps Development</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-md" id="eight">
<h5>Quality Assurance</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
</div>
</div>
I made the following little scss mixin to build for all the bootstrap breakpoints...
With it I get .col-xs-divider-left or col-lg-divider-right etc.
Note: this uses v4-alpha bootstrap syntax...
#import 'variables';
$divider-height: 100%;
#mixin make-column-dividers($breakpoints: $grid-breakpoints) {
// Common properties for all breakpoints
%col-divider {
position: absolute;
content: " ";
top: (100% - $divider-height)/2;
height: $divider-height;
width: $hr-border-width;
background-color: $hr-border-color;
}
#each $breakpoint in map-keys($breakpoints) {
.col-#{$breakpoint}-divider-right:before {
#include media-breakpoint-up($breakpoint) {
#extend %col-divider;
right: 0;
}
}
.col-#{$breakpoint}-divider-left:before {
#include media-breakpoint-up($breakpoint) {
#extend %col-divider;
left: 0;
}
}
}
}
CSS
.vr {
border-right: 1px solid #ccc !important;
}
HTML
<div class="row">
<div class="col-md-6 vr">
<p>Column 1</p>
</div>
<div class="col-md-6">
<p>Column 2</p>
</div>
</div
Now, we can use class vr wherever we need to have a vertical-divider kind of appearance.
Hope it helps!
You can achieve this by adding border class of bootstrap
like for border left ,you can use border-left
working code
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right border-bottom" id="one"><h5>Rich Media Ad Production</h5><img src="images/richmedia.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right border-bottom" id="two"><h5>Web Design & Development</h5> <img src="images/web.png" ></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right border-bottom" id="three"><h5>Mobile Apps Development</h5> <img src="images/mobile.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan border-bottom" id="four"><h5>Creative Design</h5> <img src="images/mobile.png"> </div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right" id="five"><h5>Web Analytics</h5> <img src="images/analytics.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right" id="six"><h5>Search Engine Marketing</h5> <img src="images/searchengine.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right" id="seven"><h5>Mobile Apps Development</h5> <img src="images/socialmedia.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan" id="eight"><h5>Quality Assurance</h5> <img src="images/qa.png"></div>
<hr>
</div>
for more refrence al bootstrap classes
all classes ,search for border