How to Get a Bootstrap Column to Span Multiple Rows

How can I get a Bootstrap column to span multiple rows?

For Bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row"> <div class="col-md-4"> <div class="well">1 <br/> <br/> <br/> <br/> <br/> </div> </div> <div class="col-md-8"> <div class="row"> <div class="col-md-6"> <div class="well">2</div> </div> <div class="col-md-6"> <div class="well">3</div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="well">4</div> </div> <div class="col-md-6"> <div class="well">5</div> </div> </div> </div></div><div class="row"> <div class="col-md-4"> <div class="well">6</div> </div> <div class="col-md-4"> <div class="well">7</div> </div> <div class="col-md-4"> <div class="well">8</div> </div></div>

Bootstrap column span 2 rows

In order to get something similar to the layout you want, you would have to use nested rows and columns, so div 1 & 3 would be on a container which will use 6 columns out of the 12, like this (See in full screen):

.col-lg-6 { border: 1px solid red; min-height: 200px;}
.col-lg-12 { border: 1px solid blue; min-height: 200px;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/><div class="row">  <div class="col-lg-6">1</div>  <div class="col-lg-6">    <div class="row">      <div class="col-lg-12">2</div>      <div class="col-lg-12">3</div>    </div>  </div></div>

How to let a column span multiple rows using bootstrap?

Try this
Sample Image
jsfiddle Code

<body>

<div class="container-fluid">

<div class="row">
<div class="col-sm-2" style="background-color:lavender; margin: 0px;">


<img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/b9/Terminator-2-judgement-day.jpg/250px-Terminator-2-judgement-day.jpg" width="250" height="250">

</div>
<div class="col-sm-10" style="background-color:lavenderblush;">
<div class="col-sm-12" style="background-color:white;">
<h1 style="color:#512586;">LAWAL HARDCORE</h1>
<h3 style="color:#;">UI/UX Designer | Graphics Designer</h3>
<p> <b>EMAIL:</b> lawalhardcore@eventor.com</p>

</div>
<div class="col-sm-12" style="background-color:#512586; color: white; height: 120px;">
<div class="cols-12">
<div class="col-sm-6">
<h4>Craninum One, Towry Close,</h4>

<h4>Adeola Odeku, Victoria Island, Lagos.</h4>
</div>
<div class="col-sm-6" style="padding: 25px; height: 68px; text-align: center;">

<button type="button" class="btn btn-default" style="border-radius: 50%;">
<span class="fa fa-facebook" style="color: #512586"></span>
</button>
<button type="button" class="btn btn-default" style="border-radius: 50%;">
<span class="fa fa-twitter" style="color: #512586"></span>
</button>
<button type="button" class="btn btn-default" style="border-radius: 50%;">
<span class="fa fa-instagram" style="color: #512586"></span>
</button>

<button type="button" class="btn btn-default" style="border-radius: 50%;">
<span class="fa fa-linkedin" style="color: #512586"></span>
</button>
</div>


</div>
<div class="cols-12" >
<div class="col-sm-2">
<p>08111 0832 161</p>
</div>
<span class="col-sm-1">|</span>
<div class="col-sm-2">
<p>info@eventor.com</p>
</div>
<span class="col-sm-1">|</span>
<div class="col-sm-2">
<p>www.eventor.com</p>
</div>

</div>

</div>


</div>
<div class="col-sm-12" style="background-color:white;">
<div> DISCLAIMER: This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system.</div>
</div>
</div>


</body>

How to span a column two rows in Bootstrap 4

Using custom grid layout is my first suggestion. (Or maybe bootstrap has some shortcuts to that, but I don't know of them) You can play with order-X classes of bootstrap. But that will not help you to get logo div, in between nav divs in different wrapper

.special {  display: grid;}
div {border: 1px solid grey;}
/* for tablets and desktops*/@media screen and (min-width: 600px) { .special { grid-template-columns: 1fr 2fr; grid-template-rows: 50px 50px; } .logo {grid-area: 1/1/3/2;}
}
<div class="special">  <div class="topNav">top nav</div>  <div class="logo">logo</div>  <div class="bottomNav">bottom nav</div></div>

How to use bootstrap column to span multiple rows and change order?

You can use bootstrap columns with a media query to get the desired behaviour:

1) Create the 3 columns like you normally would in HTML (see example code)

2) Use a media query to float the second div to the right at a certain breakpoint

Example code:

CSS

 @media (min-width: 768px) {
.col2 {
background-color: blue;
float: right;
}

HTML

<div class="container">
<div class="row">
<div class="col1 col-sm-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Audeo dicere, inquit. Ne tum quidem te respicies et cogitabis sibi quemque natum esse et suis voluptatibus? Duo Reges: constructio interrete. </p>

<p>Sed haec in pueris; Prodest, inquit, mihi eo esse animo. Quo igitur, inquit, modo? Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere? Ut optime, secundum naturam affectum esse possit. Scio enim esse quosdam, qui quavis lingua philosophari possint; Egone non intellego, quid sit don Graece, Latine voluptas? Quippe: habes enim a rhetoribus; </p>

<p>Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Faceres tu quidem, Torquate, haec omnia; Iam in altera philosophiae parte. Philosophi autem in suis lectulis plerumque moriuntur. Negat enim summo bono afferre incrementum diem. Nonne igitur tibi videntur, inquit, mala? </p>

</div>

<div class="col2 col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Audeo dicere, inquit. Ne tum quidem te respicies et cogitabis sibi quemque natum esse et suis voluptatibus? Duo Reges: constructio interrete. </p>

<p>Sed haec in pueris; Prodest, inquit, mihi eo esse animo. Quo igitur, inquit, modo? Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere? Ut optime, secundum naturam affectum esse possit. Scio enim esse quosdam, qui quavis lingua philosophari possint; Egone non intellego, quid sit don Graece, Latine voluptas? Quippe: habes enim a rhetoribus; </p>

<p>Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Faceres tu quidem, Torquate, haec omnia; Iam in altera philosophiae parte. Philosophi autem in suis lectulis plerumque moriuntur. Negat enim summo bono afferre incrementum diem. Nonne igitur tibi videntur, inquit, mala? </p>

<p>Sed ego in hoc resisto; Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Nunc haec primum fortasse audientis servire debemus. Facile est hoc cernere in primis puerorum aetatulis. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Sed non sunt in eo genere tantae commoditates corporis tamque productae temporibus tamque multae. Quae tamen a te agetur non melior, quam illae sunt, quas interdum optines. </p>

<p>Suo genere perveniant ad extremum; Eiuro, inquit adridens, iniquum, hac quidem de re; Neminem videbis ita laudatum, ut artifex callidus comparandarum voluptatum diceretur. Ita enim vivunt quidam, ut eorum vita refellatur oratio. Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali. Nobis aliter videtur, recte secusne, postea; </p>

</div>

<div class="col3 col-sm-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Audeo dicere, inquit. Ne tum quidem te respicies et cogitabis sibi quemque natum esse et suis voluptatibus? Duo Reges: constructio interrete. </p>

<p>Sed haec in pueris; Prodest, inquit, mihi eo esse animo. Quo igitur, inquit, modo? Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere? Ut optime, secundum naturam affectum esse possit. Scio enim esse quosdam, qui quavis lingua philosophari possint; Egone non intellego, quid sit don Graece, Latine voluptas? Quippe: habes enim a rhetoribus; </p>
</div>
</div>
</div>

Bootstrap combining rows (rowspan)

Divs stack vertically by default, so there is no need for special handling of "rows" within a column.

div {
height:50px;
}
.short-div {
height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
<h1>Responsive Bootstrap</h1>
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
<div class="short-div" style="background-color:green">Span 2</div>
<div class="short-div" style="background-color:purple">Span 2</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="short-div" style="background-color:#999">Span 6</div>
<div class="short-div">Span 6</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
</div>
</div>


Related Topics



Leave a reply



Submit