Bootstrap - How do I stream columns across multiple rows?
I am trying to create the layout shown below:
C1 C2 C3
C4 C5 C3
C6 C7 C3
I am having trouble getting the column to fill the height of all three rows. This is the code I've tried.
<div class="container">
<div class="row equal">
<div class="col-sm-6 lgImage">
</div>
</div>
</div>
<div class="container">
<div class="row equal">
<div class="col-sm-3">
Location:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
No. of Frames:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
More Info:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
</div>
with this css:
.lgImage {
background-image: url('TL/TL001/tl002.01-07-2017.13.50.00.jpg');
right: 0;
position: absolute;
}
This code doesn't work
+3
source to share
3 answers
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.lgImage {
background-image: url('TL/TL001/tl002.01-07-2017.13.50.00.jpg');
}
.column{height:100px; line-height:100px; background-color:#e5e5e5; text-align:center; margin-bottom:10px;}
.sidebar_div{height:320px; line-height:300px; background-color:#e5e5e5; text-align:center; margin-bottom:10px;}
</style>
</head>
<body>
<div class="container">
<div class="row equal">
<div class="col-sm-6 lgImage">
</div>
</div>
</div>
<div class="container">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="row equal">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c1
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c2
</div>
</div>
</div>
<div class="row equal">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c4
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c5
</div>
</div>
</div>
<div class="row equal">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c6
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c7
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="sidebar_div">
c3
</div>
</div>
</div>
</body>
</html>
+1
source to share
This is what you need?
.lgImage {
background-image: url('http://placehold.it/800x50');
right: 0;
position: relative;
width: 800px;
height: 50px;
}
.row.equal {
display: flex;
justify-content: space-around;
}
<div class="container">
<div class="row equal">
<div class="col-sm-6 lgImage">
</div>
</div>
</div>
<div class="container">
<div class="row equal">
<div class="col-sm-3">
Location:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
No. of Frames:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
More Info:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
</div>
0
source to share
This filling will surely help you get what was your requirement:
HTML: -
<section class="col-md-8">
<div class="col-md-6">CL1</div>
<div class="col-md-6">CL2</div>
<div class="col-md-6">CL4</div>
<div class="col-md-6">CL5</div>
<div class="col-md-6">CL6</div>
<div class="col-md-6">CL7</div>
</section>
<aside class="col-md-4">
<div class="col-md-12">CL3</div>
</aside>
0
source to share