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>
Related
I have two different layouts for desktop and mobile view. Here is how they look like
I have written this code so far, but it is not exactly how I need it to be. I don't know how to switch block C and D in mobile view
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-cols-lg-2 row-cols-1">
<div class="row col col-lg-10">
<div class="col-3 bg-secondary">A</div>
<div class="col-9 ">
<div class="row bg-success p-1"> B</div>
<div class="row bg-primary order-lg-2 p-1">D</div>
</div>
</div>
<div class="col col-lg-2">
<div class="col bg-warning p-1">C</div>
</div>
</div>
I need to use Bootstrap grids. Any idea on how to start?
You can use order-xx-N to reorder element at screen , bootstrap has mediaquerie built-in. https://getbootstrap.com/docs/5.0/layout/breakpoints/
Possible example
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-3 bg-secondary mb-auto">A
<p class="d-lg-none bg-light">Mobile layout</p>
<p class="d-none d-lg-block bg-info">Desktop layout</p>
</div>
<div class="row col-9">
<div class="col col-lg-9 bg-success p-1">B</div>
<div class="col order-1 p-1 bg-primary ">C</div>
<div class="col-12 bg-warning p-1 order-lg-2">D</div>
</div>
</div>
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 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>
Column not splitting properly. I need the bottom picture to go under the same picture above.
Changed col and image size
<div class=" container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-4 p-0"><a href="ourstory.html"><img src="Mainimages/Ourhistory.jpg" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
<div class="w-100"></div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
</div>
</div>
In bootstrap col-6 is synonymous to 50% and col-12 is 100%
So technically to achieve your aim you do:
|--------------------div:col-12------------------------------|
|------div:col-6---------| |----------div:col-6-------------|
|---------------------------| |----------div:row--------------|
|---------img-------------| |-div:col-12-|-|-div:col-12-|
|---------------------------| |-----img----|-|----img--------|
Try the snippet below:
.s50{
height:50%;
}
.s50 img {
width:100%;
height:100%
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-6 p-0">
<a href="ourstory.html"><img src="https://pinimg.icu/wall/0x0/los-mejores-fondos-de-pantalla-para-hombres-tumblr-wallpaper-E7f21aa5c622192c35a8e92d039623fcc.jpg?t=5cf09dc88fee5" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-6 p-0">
<div class="col-12 s50 p-0">
<img src="https://hackernoon.com/hn-images/1*lduEjOI-EQltoRbmKSICeA.jpeg" alt="Promotions">
</div>
<div class="col-12 s50 p-0">
<img src="https://d3n8a8pro7vhmx.cloudfront.net/3dna/pages/46410/meta_images/original/00-featured-bs4-bootstrap.jpg?1561992643" style="" alt="Promotions">
</div>
</div>
</div>
</div>
I'm not sure If you're looking for equal half's but you have to split the right hand side column into two rows again using divs to achieve this.
<div class="row">
<div class="col-md-6">
--First left image here--
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
-- second top right image here --
</div>
</div>
<div class="row">
<div class="col-md-12">
-- third bottom right image here --
</div>
</div>
</div>
</div>
We don't have your exact images sizes, but I've tried to put dummy images just show you example, If you want your page to display in the same alignment, you have to divide the div equally which sums up. You can set and divide the divs equally and make it responsive by inserting classes col-sm and col-md.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="feature-wrapper bg-primary pt-5 pb-5 mt-5 mt-lg-0">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<a href="ourstory.html"><img src="https://dummyimage.com/100X40/000/fff" style="width:100%"
alt="Our History"></a> </div>
<div class="col-sm-12 col-md-4 text-center text-md-left text-uppercase mb-3 mb-md-0">
<img src="https://dummyimage.com/100X50/000/fff" style="width:100%" alt="Promotions">
</div>
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<img src="https://dummyimage.com/200X60/000/fff" style="width:100%" alt="Promotions">
</div>
</div>
</div>
</div>
I'm trying to create an image grid with that little space between columns equal to the image below:
The problem is that I can not make the right margin(red line), image below shows the problem:
JSfiddle: https://jsfiddle.net/castordida/0zy7qd5m/
<div class="container gridhome mt-5 mb-5 p-0">
<div class="row" style="height:469px;">
<div class="col-sm-8 h-100" style="background-color:#000;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
<div class="col-sm-4 h-100 p-0">
<div class="col-sm-12 h-50 p-0">
<div class="h-100 ml-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
<div class="col-sm-12 h-50 p-0">
<div class="h-100 ml-1 mt-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
</div>
</div>
<div class="row mt-1" style="height:234.5px;">
<div class="col-sm-4 h-100 p-0">
<div class="h-100" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
<div class="col-sm-4 h-100 p-0">
<div class="h-100 ml-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
<div class="col-sm-4 h-100 p-0">
<div class="h-100 ml-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
</div>
</div>
Ok it's due to the fact there is a gab between your picture at right... But the fixed height doesn't mention it...
There are many ways to correct this...
First : https://jsfiddle.net/y0x7kpza/
Add an overflow:hidden to the first .row
Second: https://jsfiddle.net/d0a52xwk/
Reaffect the height of the two div on the right in taking care of the margin-top of these elements.
.h-50-bis{
height:calc(50% - 0.125rem);
}