Bootstrap - How do I have a column flow over multiple rows - html

I am trying to create a layout shown below:
C1 C2 C3
C4 C5 C3
C6 C7 C3
I am having trouble trying to have a column fill the height of all three rows.
This is the code I have 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


<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>


This fill surely helps you to get what your requirement was:
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>


Is this 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>

Related

3 column layout but 1 under the 2

How would i do something like this? http://jsfiddle.net/BxaNN/369/
but with the top column in the center top?
NOTE: this is not my code
<div class="container">
<div class="row">
<div id="content" class="col-lg-4 col-lg-push-4 col-sm-12 ">
<h2></h2>
<p></p>
</div>
<div id="sidebar-left" class="col-lg-4 col-sm-6 col-lg-pull-4">
<h2></h2>
<p></p>
</div>
<div id="sidebar-right" class="col-lg-4 col-sm-6">
<h2></h2>
<p></p>
</div>
</div>
</div>

The bootstrap classes you have already does this for you. You just need to reference the bootstrap cdn. You could also, center the text to make it pretty. check out the grid system here: Bootstrap Resource
.container {
text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div id="content" class="col-lg-4 col-lg-push-4 col-sm-12 ">
<h2>1</h2>
<p>1</p>
</div>
<div id="sidebar-left" class="col-lg-4 col-sm-6 col-lg-pull-4">
<h2>2</h2>
<p>2</p>
</div>
<div id="sidebar-right" class="col-lg-4 col-sm-6">
<h2>3</h2>
<p>4</p>
</div>
</div>
</div>

Creating a black and white grid HTML/CSS

I am trying to create a 3 by 3 black and white grid. But instead only black square is showing. I have tried using Bootstrap.
My one square of the grid should cover 3 grids space as per bootstrap grid system and I am using padding-top:100% to maintain the aspect ratio for the squares in the 3 by 3 grid.
body {
margin: 0;
color: pink;
}
.square {
width: 100%;
padding-top: 100%;
background-color: black;
}
.square-w {
width: 100%;
padding-top: 100%;
background-color: white;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="square"></div>
</div>
<div class=" col-md-3 ">
<div class="square-w"></div>
</div>
<div class=" col-md-3 ">
<div class="square"></div>
</div>
</div>
<div class="row">
<div class=" col-md-3">
<div class="square-w"></div>
</div>
<div class="col-md-3 ">
<div class="square"></div>
</div>
<div class="col-md-3">
<div class="square-w"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 ">
<div class="square"></div>
</div>
<div class="col-md-3 ">
<div class="square-w"></div>
</div>
<div class="col-md-3 ">
<div class="square"></div>
</div>
</div>
</div>

Your screen view might be too small.
Changing all the col-md-3 classes to col-sm-3 allows it to be shown on my view
JSFiddle: https://jsfiddle.net/2k5523ym/1/

You just need to put below code in css
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
and then assign nopadding class to every col-md-3 div
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class=" col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class=" col-md-3 nopadding">
<div class="square"></div>
</div>
</div>
<div class="row">
<div class=" col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square-w"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
</div>
</div>
Hope this help you

How to display two cards horizontally with equal height using bootstrap

Im using bootstrap. Need to place two cards of equal row-height. Each card is placed inside col-xs-6. Card contains text and buttons. When i use col-height col-xs-6 card both the card join together. Could be please help me on this.
<div class="row">
<div class="row-height">
<div class="col-height col-middle col-xs-6 card">
<div class="row">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Login</h3>
</div>
<div class="col-xs-12 text-center">
Login!
</div>
</div>
</div>
<div class="col-height col-middle col-xs-6 card">
<div class="row">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Sign UP</h3>
</div>
<div class="col-xs-12 text-center">
Sign Up!
</div>
</div>
</div>
</div>
</div>

Is that you want?
.row should be wrapped into .container
.card {
border: 1px solid black;
margin: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row-height">
<div class="row">
<div class="col-height col-middle col-xs-5 pull-left card">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Login</h3>
</div>
<div class="col-xs-12 text-center">
Login!
</div>
</div>
<div class="col-height col-middle col-xs-5 pull-right card">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Sign UP</h3>
</div>
<div class="col-xs-12 text-center">
Sign Up!
</div>
</div>
</div>
</div>
</div>

How to migrate this Bootstrap grid from v2.x to v3.x

I want to create this grid with twitter bootstrap 3.
<div class="container-fluid border">
<div class="row-fluid debug2">
<div class="span2 debug">aa</div>
<div class="span3 debug">bb</div>
<div class="span3 debug" style="float:left; height:300px;"></div>
</div>
<div class="row-fluid">
<div class="span3">xxx</div>
</div>
</div>
Grid Picture

You can find guidance on how to upgrade from Bootstrap v2.x to v3.x here.
row-fluid is now row
.span* is now .col-xs-*, .col-sm-*, .col-md-* or .col-lg-*. Configure depending on the screen size.
Basically it translates to this:
<div class="container border">
<div class="row debug2">
<div class="col-md-2 debug">aa</div>
<div class="col-md-3 debug">bb</div>
<div class="col-md-3 debug" style="float:left; height:300px;"></div>
</div>
<div class="row">
<div class="col-md-3">xxx</div>
</div>
</div>

Try this
.border {
border: 1px solid grey;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="row ">
<div class="col-xs-4 border" style="height:150px;"></div>
<div class="col-xs-2" ></div>
<div class="col-xs-3 border" style="height:50px;"></div>
<div class="col-xs-3 border" style="height:50px;"></div>
<div class="col-xs-4"></div>
<div class="col-xs-8 border" style="height:250px;"></div>
</div>
</div>
</div>
</div>
</div>

How to set each column same height?

Help me, how to set each column same height? I have this structure:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
</div>
</div>
In this case, the content displayed is as follows:
But when I try to resize the browser window, the content is shifted wrong:
And so should:
How to fix it?

One way would be to add a clearfix that's only visible on the smaller viewports..
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
</div>
</div>
http://bootply.com/ZDDbPlCraT

create a custom css class in your .css file
.fixed-height {
height: 200px;
}
Then add this to your HTML as follows:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
</div>
</div>