Create grid using Bootstrap divs with variable height - html
I have a grid of divs (using Bootstrap3) (see image below). I would like them act like a grid, but if they don't line up horizontally, they often are very much NOT lined up like a grid.
I thought this would be an easy solution, and I still think it might be, but for the life of me, I can't get it to work the way I'm hoping.
I've tried a lot of combinations of adding pull-left, and pull-right...etc, but again - nothing is working.
Quick example of what I mean - a grid of divs with dynamically varying heights:
<div class="col-lg-6 col-md-12">
Lorem ipsum<br>
Lorem ipsum<br>
Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
Lorem ipsum<br>
Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
Lorem ipsum<br>
Lorem ipsum<br>
Lorem ipsum<br>
Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
Lorem ipsum<br>
Lorem ipsum<br>
Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
Lorem ipsum<br>
Lorem ipsum<br>
</div>
I ended up just using a #media query. I added "col-right" class (is not a defined class - just made up) to the ones that should be on the right in large 2-column version, and on anything 1200px (lg) and over, have them float right.
This allowed the others (which default to float:left;) to wrap up next to them.
CSS:
#media (min-width: #screen-lg) {
.col-right {
float: right;
}
}
HTML
<div class="col-lg-6 col-md-12">
Lorem ipsum<br>
Lorem ipsum<br>
Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12 col-right">
Lorem ipsum<br>
Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
Lorem ipsum<br>
Lorem ipsum<br>
Lorem ipsum<br>
Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12 col-right">
Lorem ipsum<br>
Lorem ipsum<br>
Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
Lorem ipsum<br>
Lorem ipsum<br>
</div>
The problem lies in the way you're using columns (.col-lg-6). You should use only two columns, then divide your content between them.
Something like this:
<div class="row">
<div class="col-lg-6">
<p>
Lorem ipsum<br>
Lorem ipsum<br>
</p>
<p>
Lorem ipsum<br>
Lorem ipsum<br>
Lorem ipsum<br>
</p>
</div>
<div class="col-lg-6">
<p>
Lorem ipsum<br>
Lorem ipsum<br>
Lorem ipsum<br>
</p>
<p>
Lorem ipsum<br>
</p>
</div>
</div>
jsFiddle
Related
Move element from div above another div
is there some method to move that h3 heading above image? I need two divs on row, one with image and second with text. But for mobiles I need this order: heading image text <div class="container"> <div class="image"> <img> <div class="text"> <h3>Heading</h3> <p>Lorem ipsum Lorem ipsum</p> <p>Lorem ipsum Lorem ipsum</p> <p>Lorem ipsum Lorem ipsum</p> <p>Lorem ipsum Lorem ipsum</p> </div>
If you can't change the markup, you could use JS to prepend the h2 to the container if it's mobile and prepend it back to the text container if it's not mobile:
var h3 = document.getElementsByTagName('h3')[0];
var container = document.querySelector('.container');
var textContainer = document.querySelector('.text');
window.addEventListener('resize', function(event) {
var mobileMediaQuery = window.matchMedia("(max-width: 768px)")
if (mobileMediaQuery.matches) {
container.prepend(h3)
} else {
textContainer.prepend(h3)
}
}, true);
<div class="container">
<div class="image">
<img src="https://images.unsplash.com/photo-1612392062422-ef19b42f74df?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"/>
<div class="text">
<h3>Heading</h3>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
</div>
</div>
If you use the position property well, you can solve your problem.
<style>
img{
position:relative;
}
h3{
position:absolute;
top:10px/*When you want to add the h3 text at the height you want based on the picture, change the value and adjust it.*/
}
</style>
<div class="container">
<div class="image">
<img>
<div class="text">
<h3>Heading</h3>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
</div>
SVG: how to position text on top of svg?
I want to place the FAQ to be on top of this gray wave SVG. As in, the "Frequently Asked Questions" Would be on top of the SVG and the other text would be right below it still (like if there was a box around the FAQ question, I just want to shift it up). Is there a way to do that? <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#f6f6f8" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,96C320,107,400,149,480,186.7C560,224,640,256,720,261.3C800,267,880,245,960,229.3C1040,213,1120,203,1200,218.7C1280,235,1360,277,1400,298.7L1440,320L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"></path></svg> <!--FAQ accordian--> <section> <div class="container faq"> <h2 class="header-h2">Frequently Asked Questions</h2> <div class="row"> <div class="col"> <div class="faq-question"> <h5>How much does it cost?</h5> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem</p> </div> <div class="faq-question"> <h5>What will you do with Lorem?</h5> </div> </div> <div class="col"> <div class="faq-question"> <h5>What is the difference between the free and premium plans?</h5> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> </div> </div> </div> </div> </section> Currently:
You could give the svg a class and position it absolutely on top with a z-index of -1, and then space your header-h2 accordingly.
.hero {
position: absolute;
top: 0;
z-index: -1;
}
.header-h2 {
margin: 80px 0;
}
<svg class="hero" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#f6f6f8" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,96C320,107,400,149,480,186.7C560,224,640,256,720,261.3C800,267,880,245,960,229.3C1040,213,1120,203,1200,218.7C1280,235,1360,277,1400,298.7L1440,320L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"></path></svg>
<!--FAQ accordian-->
<section>
<div class="container faq">
<h2 class="header-h2">Frequently Asked Questions</h2>
<div class="row">
<div class="col">
<div class="faq-question">
<h5>How much does it cost?</h5>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem</p>
</div>
<div class="faq-question">
<h5>What will you do with Lorem?</h5>
</div>
</div>
<div class="col">
<div class="faq-question">
<h5>What is the difference between the free and premium plans?</h5>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</section>
You can either set a position for the svg (absolute/fixed) and give it a z-index:-1, OR set a position for your .faq and give it a top:1
* {
margin: 0;
padding: 0;
}
svg {
position: absolute;
top: 0;
left: 0;
max-height: 240px;
width: 100%;
z-index: -1;
}
.header-h2 {
font-family: sans-serif;
font-size: 3vw;
padding: 1.5%;
}
.row {
display: flex;
justify-content: space-around;
padding-top: 120px
}
.col {
max-width: 500px;
padding: 3%;
}
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1440 320"><path fill="#f6f6f8" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,96C320,107,400,149,480,186.7C560,224,640,256,720,261.3C800,267,880,245,960,229.3C1040,213,1120,203,1200,218.7C1280,235,1360,277,1400,298.7L1440,320L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"></path></svg>
<!--FAQ accordian-->
<section>
<div class="container faq">
<h2 class="header-h2">Frequently Asked Questions</h2>
<div class="row">
<div class="col">
<div class="faq-question">
<h5>How much does it cost?</h5>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem</p>
</div>
<div class="faq-question">
<h5>What will you do with Lorem?</h5>
</div>
</div>
<div class="col">
<div class="faq-question">
<h5>What is the difference between the free and premium plans?</h5>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</section>
Bootstrap align div correctly
I am trying to set 2 div elements next to each other by using bootstrap code: <div class='col-12'> <div class='row'> <div class='col-6'> </div> <div class='col-6'> </div> </div> </div> this works fine the only thing is that when the window width gets to small the divs overlap. when it gets to small I want to set the divs beneath each other and col-6 then has to be col-12 How can I achieve this?
You can use the sm breakpoint... https://www.codeply.com/go/QGmvcPu7Ts <div class='col-md-12'> <div class='row'> <div class='col-sm-6'> </div> <div class='col-sm-6'> </div> </div> </div>
You should use have read the Bootstrap Grid System to make them align in every screen width. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <div class='col-12'> <div class='row'> <div class='col-md-6 col-sm-12 col-12'> lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM </div> <div class='col-md-6 col-sm-12 col-12'> lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM </div> </div> </div>
<div class='col-12'> <div class='row'> <div class='col-6 col-xs-12'> </div> <div class='col-6 col-xs-12'> </div> </div> </div>
How can I get multiple bootstrap cols in 1 row without nesting?
I am trying to create this grid with bootstrap: I can easily create the first row no problem using cols. It would be simple enough to create a second row, however, the entire grid has a drop shadow, so even when I create a second row and just bump it up, I cant create a drop shadow under the entire grid. I have tried nesting other cols inside the row but it doesn't work well since the columns are not the same width above and below. Here is what I have so far: https://jsfiddle.net/5nk28tm0/ Using display: flex; padding-top:120px padding-bottom:100px; to keep the columns all the same height. Just need to add another row without losing the drop shadow ability. Not sure what to try from here. Any suggestions?
The problem is because the columns each have a varying height, hence the elements are not in proper order. If you use the CSS below, you can restrict the minimum height and all the elements will align accordingly.
.row > div {
min-height: 50px;
}
.home-testimonial {
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-shadow: 15px 10px 50px #e3e3e3;
align-content: center;
vertical-align: middle;
}
.col-sm-2 {
align-content: center;
vertical-align: middle;
padding-top: 120px;
padding-bottom: 100px;
}
.col-sm-4 {
padding-top: 50px;
color: #333e48;
}
.testimonial-body {
padding-left: 40px;
padding-right: 40px;
}
}
.row > div {
min-height: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="home-testimonial">
<div class="row">
<div class="col-xs-2 bg-success">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-2 bg-success">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-2 bg-success">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
</div>
</div>
It might be worth checking out CSS Grid for this layout.
row-fluid inside row-fluid with bootstrap
I am beginner of Bootstrap framework and i got the problem when i layout my design. I want to divide 4 column inside of a row-fluid so i write the code as below: But it is not appear to what i expected, the text in first Lorem ipsum encroached to the second one and not fixed to 4 column <div class="row-fluid"> <div class="span2"></div> <div class="span8"> <div class="row-fluid"> <div class="span3">Lorem ipsum dolor sit amet</div> <div class="span3">Lorem ipsum dolor sit amet</div> <div class="span3">Lorem ipsum dolor sit amet</div> <div class="span3">Lorem ipsum dolor sit amet</div> </div> </div> <div class="span2"></div> Please anyone can help me,thanks in advance
Try wrapping the html in div.container-fluid and closing the div tag for the row: <div class="container-fluid"> <div class="row-fluid"> <div class="span2">First</div> <div class="span8"> <div class="row-fluid"> <div class="span3">Lorem ipsum dolor sit amet</div> <div class="span3">Lorem ipsum dolor sit amet</div> <div class="span3">Lorem ipsum dolor sit amet</div> <div class="span3">Lorem ipsum dolor sit amet</div> </div> </div> <div class="span2">Last</div> </div> </div>