<div class="row">
<div class="col-lg-12">
<div class="container-fluid top">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of typ
</p>
</div>
</div>
i have given col-lg-12 to a div, but on giving position: fixed why it is taking least size. why still i need to give width:100 percentage to div.
A simple Bootstrap architecture like
<div class="container-fluid">
...
</div>
You can see more on http://getbootstrap.com/css/#overview-container
Your correct architecture (not always, but most of the time) is:
container - row - col
So in this case it would be something like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of typ
</p>
</div>
</div>
</div>
Now, if the text doesn't go all the way to the edge is because col-lg-* classes have a gutter padding of 15px. Simply remove the col-lg-* class and you will have the row instead which it doesn't have a padding.
See my demo here
EDIT
Credit to Tim Lewis:
"the container and container-fluid both have a 15px margin and row has a -15px margin. Make sure to not wind up with a -15px or 30px margin, depending on how you use them"
I think it should be corrected as
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
Related
With Vuejs and Bootstrap v5.0.1 I make image at left and text right aligned and with code :
<div class="d-flex">
<div class="float-start">
<img class=" item_image_left_aligned" :src="itemDetailsImage.url" >
</div>
<div class="float-end">
<div v-html="itemDetails.description"></div>
</div>
</div>
I have text aligned at right, but I got empty space under image if text is long.
How can I fill area under image with text ?
Thanks in advance!
Since you are looking for a floating solution, you don't need the d-flex. Only make the image floating left, not the text.
Not sure what your item_image_left_aligned class does.
<div>
<div class="float-start">
<img class="item_image_left_aligned" :src="itemDetailsImage.url" />
</div>
<div>
<div v-html="itemDetails.description"></div>
</div>
</div>
is this what you are looking for. I have added h-100 bootstrap class to the image.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
<div class="float-start">
<img class=" item_image_left_aligned h-100 " width="100" src="https://dummyimage.com/100x100/000/fff" >
</div>
<div class="float-end">
<div v-html="itemDetails.description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
I am using Bootstrap 4 and slick slider on my project. I need to show 3 column in card style. So i design the card and then tried slick-slider on it. Its working very well. When i tried to keep 1st card fixed and then use next 2 card for sliding. But its getting out of same row.I want all card in same row.
This is how i want:
But this is what i get when i tried:
Here is my code i use which not working:
jQuery(document).ready(function ($) {
$('.sp-carousel').slick({
dots: false,
arrows: true,
infinite: true,
speed: 300,
autoplay: true,
autoplaySpeed: 2000,
slidesToShow: 3,
slidesToScroll: 1,
prevArrow: '<button class="slide-arrow prev-arrow"></button>',
nextArrow: '<button class="slide-arrow next-arrow"></button>'
});
});
/* Specialist card details start */
.sp-wrapper{ width:100%;padding:1%;}
.sp-carousel{ width:90%;height:90%; margin:0px auto;}
.cardmain{ margin:10px;}
.cardmain hr {width:100%;background-color:#ADADAD;opcaity:0.1;margin:2px;}
.slick-slide img{ width:369px;height:385px;}
.slick-prev, .slick-next{background: #000;border-radius: 15px;border-color: transparent;}
.card{border: 2px solid #fff;box-shadow: 1px 1px 15px #ccc;}
.card-header {padding:0;}
.card-header img {width:100%;}
.card-body{background:#fff;width:100%;vertical-align:top;padding:10px;}
.card-content-sp{background:#fff;}
.card-content-sp h5 {color:#000000;font-weight:400;font-size:18px;line-height:1.3em;margin-top:-1px;margin-bottom:5px;padding:0;}
.card-title{color:#000000;font-weight:500;font-size:18px;line-height:1.3em;margin-top:0;margin-bottom:0px;padding:0px;}
.card-text{color:#747373;font-size:14px;font-weight:400;font-size:1em;line-height:1.5;margin:0px;margin-bottom:10px;padding:0;font-family:Roboto-Thin;height:145px;overflow:auto;}
/* Specialist card details End */
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
<!-- jQuery first then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="sp-wrapper">
<div class="cardmain">
<div class="card">
<div class="card-header">
<img src="http://via.placeholder.com/369x385?text=dr-samim">
</div><a href="dr.html">
<div class="card-body">
<div class="card-content-sp">
<div class="card-title">DR SARKAR MAHBUB AHMED SAMIM</div><hr><h5>Consultant & Co-Ordinator</h5>
<div class="card-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
</div>
</div>
</div></a>
</div>
</div>
<div class="sp-carousel">
<div class="cardmain">
<div class="card">
<div class="card-header">
<img src="http://via.placeholder.com/369x385?text=dr-2">
</div><a href="dr.html">
<div class="card-body">
<div class="card-content-sp">
<div class="card-title">DR SARKAR MAHBUB AHMED SAMIM</div><hr><h5>Consultant & Co-Ordinator</h5>
<div class="card-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
</div>
</div>
</div></a>
</div>
</div>
<div class="cardmain">
<div class="card">
<div class="card-header">
<img src="http://via.placeholder.com/369x385?text=dr-3">
</div><a href="dr.html">
<div class="card-body">
<div class="card-content-sp">
<div class="card-title">DR SARKAR MAHBUB AHMED SAMIM</div><hr><h5>Consultant & Co-Ordinator</h5>
<div class="card-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
</div>
</div>
</div></a>
</div>
</div>
<div class="cardmain">
<div class="card">
<div class="card-header">
<img src="http://via.placeholder.com/369x385?text=dr-4">
</div><a href="dr.html">
<div class="card-body">
<div class="card-content-sp">
<div class="card-title">This is the Fourth slider</div><hr><h5>Consultant & Co-Ordinator</h5>
<div class="card-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
</div>
</div>
</div></a>
</div>
</div>
<div class="cardmain">
<div class="card">
<div class="card-header">
<img src="http://via.placeholder.com/369x385?text=dr-5">
</div><a href="dr.html">
<div class="card-body">
<div class="card-content-sp">
<div class="card-title">This is the Fifth slider</div><hr><h5>Consultant & Co-Ordinator</h5>
<div class="card-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
</div>
</div>
</div></a>
</div>
</div>
<div class="cardmain">
<div class="card">
<div class="card-header">
<img src="http://via.placeholder.com/369x385?text=dr-6">
</div><a href="dr.html">
<div class="card-body">
<div class="card-content-sp">
<div class="card-title">This is the Sixth slider</div><hr><h5>Consultant & Co-Ordinator</h5>
<div class="card-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
</div>
</div>
</div></a>
</div>
</div>
</div>
</div>
Here is the code which working well but i dont want exactly:
https://jsfiddle.net/mczkqv75/2/
How can i fixed the first slider or first card then make slider from 2nd card?
Try this:
.sp-wrapper {
display: flex;
}
.sp-carousel {
flex: 0 0 66.67%;
min-width: 66.67%;
max-width: 66.67%;
}
And change slidesToShow in your JS into 2:
slidesToShow: 2,
I have a div contains a row with 2 columns. Left column contains an image and right side contains some text. I've tried 100s of different combinations but couldn't figure out how to avoid overlapping problem. As you can see the images, when I start to resize the window, it starts to overlapping.
<div class="py-5">
<section class="my-5"><!-- Section -->
<div class="container"><!-- Container -->
<div class="row"><!-- Grid row -->
<!-- Grid column -->
<div class="col-xs-12 col-md-6">
<img th:src="#{/img/about.jpg}" src="" alt="">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xs-12 col-md-6">
<!-- Section heading -->
<h1 class="h1-responsive font-weight-bold mb-4">About Us</h1>
<!-- Section description -->
<p class="lead grey-text mx-auto">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</p>
</div>
<!-- Grid column -->
</div><!-- Grid row -->
</div><!-- Container -->
</section><!-- Section -->
</div>
I would love to have some margin top when its small as well, to have a clear separation.
UPDATE
Ryan Maffey, your solution works good up until a certain point. This is the result just before going for mobile view. Looks so bad at this point. I would love to have image on its own row if it shrinks more than 50%. Is it possible?
UPDATE 2
I finally found the combination I was looking for. This result solved all my problems.
<div>
<section>
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-6 my-4">
<img style="width: 100%;" th:src="#{/img/about.jpg}" alt="">
</div>
<div class="col-md-12 col-lg-6 my-4">
<h1 class="h1-responsive font-weight-bold mb-4">Header</h1>
<p class="lead grey-text mx-auto">Lorem ipsum...</p>
</div>
</div>
</div>
</section>
</div>
It looks as though the image is overflowing the column.
Adding CSS width: 100% onto the image will mean that it is only ever as wide as the width of the column it's in.
In the Mobile view you need to center the image vertically. Just use the parent div's style of that image to display: inline-block; height: 100%; vertical-align: middle; and that image to vertical-align: middle; max-height: 100px;
I have a very simple grid using flexbox where I want to display multi-line data in a scrollable box. I might be missing a trivial property but the row height doesn't appear to adjust itself properly to the height of it's content.
An example: https://plnkr.co/edit/rCXfvd4Vsh8RgoFja89A?p=preview
.grid {
display: flex;
flex-flow: column;
max-height: 400px;
overflow-y: auto;
}
.grid .header {
font-weight: 700;
margin-bottom: 6px;
border-bottom: 3px solid black;
}
.grid .row {
flex: 1;
display: flex;
flex-flow: row;
}
.grid .row:nth-child(even) {
background: #CCC;
}
.grid .col-1 {
flex: 0 0 60px;
}
.grid .col-2 {
flex: 1 0 200px;
white-space: pre;
}
<h1>Flexbox grid</h1>
<h3>Overflow example</h3>
<div class="grid">
<div class="row header">
<div class="col-1">Col 1</div>
<div class="col-2">Col 2</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">One Line</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">One Line</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
</div>
<h3>No overflow example</h3>
<div class="grid">
<div class="row header">
<div class="col-1">Col 1</div>
<div class="col-2">Col 2</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
</div>
To keep everything simple I my columns are fixed size and all the data I want to display is loaded into the grid (instead of using a virtual grid). Is there a way to fix my example so that the rows adjust itself to the content?
EDIT: SOLVED!
As user #bhv pointed out I should have disabled shrink on .row by applying flex: 1 0 auto instead of flex+:1 (1 auto).
.grid {
display: flex;
flex-flow: column;
max-height: 400px;
overflow-y: auto;
}
.grid .header {
font-weight: 700;
margin-bottom: 6px;
border-bottom: 3px solid black;
}
.grid .row {
flex: 1;
display: flex;
flex-flow: row;
flex-shrink: 0;
}
.grid .row:nth-child(even) {
background: #CCC;
}
.grid .col-1 {
flex: 0 0 60px;
}
.grid .col-2 {
flex: 1 0 200px;
white-space: pre;
}
<h1>Flexbox grid</h1>
<h3>Overflow example</h3>
<div class="grid">
<div class="row header">
<div class="col-1">Col 1</div>
<div class="col-2">Col 2</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">One Line</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">One Line</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
</div>
<h3>No overflow example</h3>
<div class="grid">
<div class="row header">
<div class="col-1">Col 1</div>
<div class="col-2">Col 2</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
</div>
https://plnkr.co/edit/jIoaME?p=preview
Since the total height of your items is higher than their parents max-height, and since the flex-shrink defaults to 1, they will shrink as much as possible to fit.
So by simply change flex-shrink to 0 will prevent that.
Also the flex: 1 cause another change of the defaults, where the flex-basis is set to 0, which will make the items share the space left equally, instead of the default auto, which takes their content into account before the remaining space is calculated.
In your case though, where the parent has no height (and flex-direction: column), flex: 1 has no effect and can be deleted.
i want to change the orientation of the col in small screen so i took the help of bootstrap Responsive utilities
<div class="row">
<div class="col-md-4 hidden-sm hidden-xs">
<h3>News title will go here with short description</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
Read more <span class="read-more-btn-symbol">»</span>
</div>
<div class="col-md-8 hidden-sm hidden-xs ">
<img class="img-responsive" src="images/mid2.jpg">
</div>
<div class="col-md-8 visible-sm visible-xs">
<img class="img-responsive" src="images/mid2.jpg">
</div>
<div class="col-md-4 visible-sm visible-xs ">
<h3>News title will go here with short description</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
Read more <span class="read-more-btn-symbol">»</span>
</div>
</div><hr>
but i dont want to write the same line twice and add different responsive classes ?
how do i fix this without writing the same thing twice
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-8">b</div>
<div class="col-md-8">b</div>
<div class="col-md-4">a</div>
</div><hr>
I try it with the last version of bootstrap and it works.
But I prefer work in separate divs with class="row".
You can add classes in the same line like this--
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4 hidden-sm hidden-xs"></div>
Then wrap all the div's inside it
Hope this helps!