I want to create this layout. I tried making 2 and 4 div duplicate and showing them on mobile and displaying on desktop and opposite.
This code is working as I expected. But I want to know that is it possible to make it without duplicating the content.
<div class="row">
<div class="col-md-2 col-12">
<img src="http://via.placeholder.com/106x106">
<div class="show-mobile">
<div>content2</div>
<div>content4</div>
</div>
</div>
<div class="col-md-8 col-12">
<div class="show-desktop">
content2
</div>
<div>
content 3
</div>
</div>
<div class="col-md-2 col-12">
<div class="show-desktop">
content 4
</div>
<div>
content 5
</div>
</div>
</div>
This might be a not a perfect solution but visually looks close enough
<div class="container">
<div class="row">
<div class="col-4 col-md-2">
<img src="http://via.placeholder.com/106x106">
</div>
<div class="col-8 col-md-8 bg-light border">
2
</div>
<div class="col-12 col-md-8 offset-md-2 order-2 bg-light border">
3
</div>
<div class="col-8 offset-4 col-md-2 offset-md-0 bg-light border">
4
</div>
<div class="col-12 col-md-2 order-3 bg-light border">
5
</div>
</div>
</div>
Related
Maybe I am blind, but my Bootstrap Grid is not behaving as expected.
Shouldn't it fill the whole row? Image of possily wrong behavior
<div class="container min-vh-100 pt-5">
<h5 class="text-white mt-2">{{event?.teamA?.name}} vs. {{event?.teamB?.name}}</h5>
<div class="row py-0">
<div class="col-4 row bg-info" style="max-height: 60vh;">
<div class="col-12 row" style="max-height: 15vh;">
<div class="col-8 bg-danger row">
<div class="col-5 text-right"><h5>0</h5>Heim</div>
<div class="col-1 text-center"><h5>:</h5></div>
<div class="col-5 text-left"><h5>0</h5>Gast</div>
<div class="col-1"></div>
<div class="col-12"><p class="text-sm-center">Spielstand</p></div>
</div>
<div class="col-4 bg-success row">
<div class="col-6 text-right">0<br>Heim</div>
<div class="col-6 text-center">0<br>Gast</div>
<div class="col-12 text-left"><p class="text-sm-center">Teamfouls</p></div>
</div>
</div>
</div>
</div>
You must remember that "row" class has set default properties:
margin-right: -15px;
margin-left: -15px;
And "col-anything" classes have set default properties:
padding-right: 15px;
padding-left: 15px;
That's why your idea don't work as you expected.
Bootstrap 5 (update 2021)
The Bootstrap 5 grid still uses flexbox so nesting the grid row/col still works the same way...
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
</div>
</div>
</div>
Bootstrap 4 (original answer)
Don't use col and row together in the same div. Instead follow the Bootstrap grid rules...
"In a grid layout, content must be placed within columns and only
columns may be immediate children of rows."
<div class="row py-0">
<div class="col-4 bg-info" style="max-height: 60vh;">
<div class="row" style="max-height: 15vh;">
<div class="col-8 bg-danger">
<div class="row">
<div class="col-5 text-right">
<h5>0</h5>Heim
</div>
<div class="col-1 text-center">
<h5>:</h5>
</div>
<div class="col-5 text-left">
<h5>0</h5>Gast
</div>
<div class="col-1"></div>
<div class="col-12">
<p class="text-sm-center">Spielstand</p>
</div>
</div>
</div>
<div class="col-4 bg-success">
<div class="row">
<div class="col-6 text-right">0<br>Heim</div>
<div class="col-6 text-center">0<br>Gast</div>
<div class="col-12 text-left">
<p class="text-sm-center">Teamfouls</p>
</div>
</div>
</div>
</div>
</div>
</div>
https://codeply.com/p/mKFXWjc39k
I have a problem that the order-[num] is not working because of the left and right side in different col's
Screenshot of view
<section class="row justify-content-center">
<div class="col-md-11">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-12 mb-3 order-0">
order small 1
</div>
<div class="col-12 mb-3 order-2">
order small 3
</div>
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="col-12 mb-3 order-1">
Ordering as small 2
</div>
<div class="col-lg-6 mb-3 order-3">
ordering as small 4
</div>
<div class="col-lg-6 mb-3 order-4">
ordering as small 5
</div>
</div>
</div>
</div>
</div>
</section>
if I placed all col's in one row it created a big white space of the height of place 2
I can only think of a solution which duplicates the section 3, puts its copy between 2 and the row of 4 and 5, and show/hide section 3 and its copy based on the break point.
HTML
<div class="container">
<div class="row">
<div class="col-md-5">
<section class="mb-3">
1
</section>
<section class="mb-3 d-none d-md-block">
3
</section>
</div>
<div class="col-md-7">
<section class="mb-3">
2
</section>
<section class="mb-3 d-md-none">
copy of 3
</section>
<div class="row">
<div class="col">
<section class="mb-3">
4
</section>
</div>
<div class="col">
<section class="mb-3">
5
</section>
</div>
</div>
</div>
</div>
</div>
Result
On large screens:
On small screens:
fiddle: http://jsfiddle.net/59x0s17k/1/
Having trouble with Bootstrap where I have two divs: (A) as col-lg-6 & (B) as col-lg-6 on a large device.
will render: (A)(B)
I am looking to display switch the order of the divs on a mobile or small device? col-sm-12
will render: (B)
(A) *(to display on top of each other)
<section class="about-page">
<div class="container">
<div class="row mineral_padding">
<div class="col-lg-6 col-sm-12 order-1 wow fadeInLeft">
<div class="about_us mineral_margin">
<div class="about_slide">
<div>
<h5>A
</h5>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12 order-12 wow fadeInRight">B</div>
</div>
</div>
</section>
I am using Bootstrap v4.0.0-alpha.6 (no going back here)
Thanks guys
Basically, this question has been answered before here and here.
In Bootstrap 4 alpha.6 the ordering classes were flex-*, so it would be:
<section class="about-page">
<div class="container">
<div class="row mineral_padding">
<div class="col-lg-6 col-sm-12 flex-last flex-lg-first wow fadeInLeft">
<div class="about_us mineral_margin">
<div class="about_slide">
<div>
<h5>A
</h5>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12 wow fadeInRight">B</div>
</div>
</div>
</section>
https://www.codeply.com/go/ajPR2ByFVM
As of 4.0 beta, the classes changed to order-* so instead you'd use order-lg-first order-last on the "A" div.
Use order-lg-1 order-sm-0 on B
Use order-lg-0 order-sm-1 on A
https://getbootstrap.com/docs/4.0/utilities/flex/#order
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="about-page">
<div class="container">
<div class="row mineral_padding">
<div class="col-lg-6 col-sm-12 order-lg-0 order-sm-1 wow fadeInLeft">
<div class="about_us mineral_margin">
<div class="about_slide">
<div>
<h5>A
</h5>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12 order-lg-1 order-sm-0 wow fadeInRight">B</div>
</div>
</div>
</section>
With this code when the width of the container is less than 792px the content of the div with the class 'col-xs-6' disappear.
<div class="cont">
<div class="top">
<div class="col-md-3 text-center col-xs-6">
<small>id:</small>
0001
</div>
<div class="col-md-3 text-center col-xs-6">
<small>reference:</small>
PRJ1
</div>
<div class="col-md-3 text-center">
<small>name:</small>
Project 1
</div>
</div>
</div>
how can I display it?
add class name row to top class
<div class="cont">
<div class="top row">
<div class="col-md-3 text-center col-xs-6">
<small>id:</small>
0001
</div>
<div class="col-md-3 text-center col-xs-6">
<small>reference:</small>
PRJ1
</div>
<div class="col-md-3 text-center">
<small>name:</small>
Project 1
</div>
</div>
</div>
Hi I'm working on a eCommerce template witch uses Bootstrap 4 Beta. I made it work on mobile, but on desktop I could not figure how to make the Buy Box stay under title. On my aproach it apears under the Gallery section.
Desired Desktop
Desired Mobile
<div class="container-fluid">
<div class="row">
<div class="col-xl-1 d-none d-md-block"></div>
<div class="col-xl-10 col-12">
<div class="row">
<div class="col-xl-6 order-xl-1 col-12 order-2 d-flex">
Gallery
</div>
<div class="col-xl-6 order-xl-2 col-12 order-1">
Title
</div>
<div class="col-xl-6 order-xl-3 col-12 order-3">
Buy Box
</div>
<div class="col-12 order-xl-4 order-4">
Description
</div>
<div class="col-12 order-xl-5 order-5">
Related
</div>
</div>
</div>
<div class="col-xl-1 d-none d-md-block"></div>
</div>
</div>
You could use the util classes to float the cols on xl widths, which would cause the "Best Buy" box to move under the title, assuming the height of the gallery is taller.
https://www.codeply.com/go/3E3Y9A5zZa
<div class="container-fluid">
<div class="row">
<div class="col-xl-1 d-none d-md-block"></div>
<div class="col-xl-10 col-12">
<div class="row d-xl-block d-flex h-100">
<div class="col-xl-6 order-xl-1 col-12 order-2 order-xl-1 d-flex bg-warning tall float-left">
Gallery
</div>
<div class="col-xl-6 order-xl-2 col-12 order-1 bg-primary float-left">
Title
</div>
<div class="col-xl-6 order-xl-3 col-12 order-3 bg-primary float-left">
Buy Box
</div>
<div class="col-12 bg-info order-4 float-left">
Description
</div>
<div class="col-12 bg-info order-5 float-left">
Related
</div>
</div>
</div>
<div class="col-xl-1 d-none d-md-block"></div>
</div>
</div>