In Bootstrap 5 I would like to achieve reordering columns between desktop and mobile like on this picture
I have tried the order classes and workaround with position: absolute, but that does not work as I would like to.
I also found there was somebody trying to achieve the same, but probably with old bootstrap and without a satisfying solution (I would like to avoid float). Also, green plus red part can have higher height than blue one.
The simple code without reordering is here:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-12 col-xxl-6">
<div style="height:20px; background-color:green;"></div>
</div>
<div class="col-12 col-xxl-6">
<div style="height:60px; background-color:blue;"></div>
</div>
<div class="col-12 col-xxl-6">
<div style="height:40px; background-color:red;"></div>
</div>
</div>
You can use the display: flex property, in bootstrap it would be the classes with.flex- *
https://getbootstrap.com/docs/5.0/utilities/flex/
and to better understand how the display: flex works
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can do this by duplicating the green section using different .d-* display utility classes. The first instance should be hidden above the breakpoint with .d-xxl-none and the second instance should be hidden below the breakpoint with .d-none and shown above with .d-xxl-block:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-12 col-xxl-6 d-xxl-none">
<div style="height:20px; background-color:green;"></div>
</div>
<div class="col-12 col-xxl-6">
<div style="height:60px; background-color:blue;"></div>
</div>
<div class="col-12 col-xxl-6">
<div class="d-none d-xxl-block" style="height:20px; background-color:green;"></div>
<div style="height:40px; background-color:red; "></div>
</div>
</div>
Related
I have been experimenting with full responsive layouts between desktops, tablet, and mobile phone sizes for a bit but am having trouble with the layout below.
I was using a grid layout from bootstrap but since it is two columns, as the width shrinks, the second column of two goes below the left, main content section. I want to split it up as the screen caps below state.
This is the starting view:
This is what I want to happen:
This would be the mobile phone view:
So the wide view will get shrunk during testing and I want it to jump to the mobile view where the top side bar goes above the main content and matches the width of the main content while the bottom sidebar does the same thing to the bottom.
It is easy to put both sidebars on the bottom but I want to try to figure out the possibility of splitting it up.
For testing I am using flexbox, css3 and bootstrap5+ and no plugins or javascript.
Solution 1: You can use CSS float feature with float-end and float-start bootstrap classes ref:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid vh-100 vw-100 py-2 bg-light clearfix">
<div class="float-sm-end col-sm-4 col-12 h-25 bg-secondary">Sidebar Top</div>
<div class="float-sm-start col-sm-8 col-12 h-100 bg-warning">Content</div>
<div class="float-sm-end col-sm-4 col-12 h-25 bg-info">Sidebar bottom</div>
</div>
Go in Full page view and reduce browser width below 576px to see the responsive change.
I've used breakpoint small col-sm-* here, use different breakpoints to handle different devices.
There are only d-*-grid rules in entire boostrap v5.1.3 CSS file. Rest of the stuff is experimental.
Solution 2: Using flexbox, playing with order and wrap. Improved version of #Rana's answer:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column flex-sm-wrap vh-100 vw-100 py-2 bg-light">
<div class="order-sm-1 order-2 col-sm-8 col-12 h-100 bg-warning">Content</div>
<div class="order-sm-2 order-1 col-sm-4 col-12 h-25 bg-secondary">Sidebar Top</div>
<div class="order-sm-3 order-3 col-sm-4 col-12 h-25 bg-info">Sidebar bottom</div>
</div>
You may want to try out Bootstrap's Flex order utility to achieve the desired result
https://getbootstrap.com/docs/5.0/utilities/flex/#order
Also, share a code example so others can see what you have already tried, I believe you may face some issues even with Flex's Order utility, but that depends on your HTML structure.
For such layout my preference would be to create a copy of the top column for mobile / desktop, and use d- utility to show hide the right one.
<div class="container">
<div class="row ">
<div class="col-12 d-md-none d-block">
<div class="box box-1">sidebar top col (only for mobile)</div>
</div>
<div class="col-md-8">
<div class="box box-2">main col</div>
</div>
<div class="col-md-4">
<div class="box box-3 d-none d-md-block">sidebar top col (only for desktop)</div>
<div class="box box-4">sidebar bottom col</div>
</div>
</div>
</div>
Example - https://jsbin.com/yidokokewu/1/edit?html,css,output
Alternatively if you are already using Bootstrap 5, then you should also consider using CSS Grid, Bootstrap 5 comes with a lot of useful utilities for that -
https://getbootstrap.com/docs/5.1/layout/css-grid/
If you do not want to duplicate your HTML to show one on desktop and the other on mobile then CSS Grid for layout is the best choice - it has some learning curve but it is worth trying out
You can try following properties
flex-flow: column;
flex-wrap: wrap/nowrap;
order: 1/2/3/....;
When screen-size reaches certain limit than change these values like in below snippet
.container {
display: flex;
flex-flow: column;
flex-wrap: wrap;
background-color: lightgray;
}
.containerBox {
width: 50%;
}
.containerBox1 {
background-color: lightgreen;
order: 2;
}
.containerBox2 {
background-color: yellow;
order: 1;
}
.containerBox3 {
background-color: lightblue;
order: 3;
}
#media screen and (max-width: 700px) {
.container {
background-color: grey;
flex-wrap: nowrap;
}
.containerBox {
width: 100%;
}
.containerBox1 {
order: 1;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container vh-100 vw-100">
<div class="containerBox containerBox1 h-25">Sidebar Top</div>
<div class="containerBox containerBox2 h-100">Content</div>
<div class="containerBox containerBox3 h-25">Sidebar bottom</div>
</div>
Using float-start for left column and float-end for right columns is the best solution. col-12 and col-sm-* were used only in order to defining width of columns. Avoid of using row class for parent div because this will force columns to act like flex items.
Also clearfix class for parent div is required to prevent overlapping following elements.
More information about float: https://getbootstrap.com/docs/5.1/utilities/float/
More information about clear-fix: https://getbootstrap.com/docs/5.1/helpers/clearfix/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="clearfix">
<div class="col-12 col-sm-4 float-end bg-secondary">Sidebar Top Area</div>
<div class="col-12 col-sm-8 float-start bg-primary">Content<br>Some Text<br>Some Text</div>
<div class="col-12 col-sm-4 float-end bg-success">Sidebar Bottom Area</div>
</div>
go to enter link description here
or
enter link description here
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-9 bg-success">col-12 col-sm-9</div>
<div class="col-12 col-sm-3 bg-warning">col-12 col-sm-3</div>
</div>
</div>
</div>
</body>
</html>
.content {
background-color: #faaa03;
height: 500px;
}
.sidebarTop {
background-color: #ccd0d5;
}
.sidebarBottom {
background-color: #99d2f2;
}
.custom-row {
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="custom-row clearfix d-flex flex-wrap d-lg-block">
<div class="col-12 col-md-8 col-lg-8 content order-2 float-lg-start">Content</div>
<div class="col-12 col-md-2 col-lg-4 sidebarTop order-1 float-lg-end">Sidebar Top Area</div>
<div class="col-12 col-md-2 col-lg-4 sidebarBottom order-3 float-lg-end">Sidebar Bottom Area</div>
</div>
</div>
Give this a Try
I am using a Bootstrap v4.1.2.I am trying to use col-md-6 but on my pc >1300px width but it is not showing in two columns.But if i am using float:left it works
But otherwise it is showing in only one columns and blank another column (both in case of using container or container-fluid or nothing)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6">
.....
</div>
<div class="col-6">
.....
</div>
</div>
</div>
Basing on Bootstrap 4 Documentation (https://getbootstrap.com/docs/4.0/layout/grid/) it should look like this :
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
</div>
The correct <link> to use Bootstrap 4.1.2 CSS is:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
Have you checked the browser console? Because you're not correctly linking it, the CSS could be getting blocked.
Working code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6">
.....
</div>
<div class="col-6">
.....
</div>
</div>
</div>
I am new to the bootstrap. I have following bootstrap code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="padding-top: 25px; ">
<div class="col-md-10 col-md-offset-1" style="background-color: #F0F8FF;">
<div class="col-md-3">
<img src="{{URL::asset('/images/car.png')}}" alt="profile Pic" height="50" width="50">Car
</div>
</div>
</div>
Now, I need the first image and then under the image 'car' word in the center to the div and under word some discription about the car. like image of this. how can I do this?
See image here:
Based on the code you've provided I assume you are using Bootstrap 3.x and so the below code reflects that. The two main classes you might rely on here (because there are multiple methods to achieve your desired outcome) would be .text-center and .center-block. The first simply applies text-align: center to the element while the latter alters the display and left/right margin to force centering.
.your-custom-background {
background: #F0F8FF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="your-custom-background text-center">
<img src="https://placehold.it/50/50/" alt="profile Pic" height="50" width="50" class="center-block">
<p>Car</p>
<p>Some additional description goes here.</p>
</div>
</div>
</div>
</div>
A couple of additional notes as you mention you are new to Bootstrap:
(1) Because Bootstrap's Grid applies padding to the column wrapper, you should avoid applying backgrounds directly to this element unless your desire is to re-color both the content area AND the gutter.
(2) It's not clear why you're using .col-md-3 inside your .col-md-10 but columns must always be wrapped within a .row, even when nested.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-3 text-center">
<img class="d-block m-auto" src="https://placehold.it/50x50"/>
<div>Car</div>
<div>62.3333</div>
<div>text text text texttext texttext texttext text</div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
I have an issue with WordPress website in mobile responsive. I have multiple sections with the below arrangement.
Left side content and right side image ( First Section )
Right Side Image and Left side content ( Second Section )
In the mobile version sections going in the same arrangement (Content -> Image | Image -> Content).
But I want arrangement should be quite opposite for the second section in mobile view.
Image -> Content | Image -> content
I want a layout like this in mobile:
Layout in desktop version:
How can I fix this issue?
Either you can use bootstrap grid system for those div or use a media query for them specifically for the mobile devices.
I guess grid system would be easy.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
First columns
</div>
<div class="col-sm-6 col-md-6">
Second columns
</div>
<div class="col-sm-6 col-md-6">
Third columns
</div>
<div class="col-sm-6 col-md-6">
Fourth columns
</div>
</div>
You can use the concept of bootstrap push and pull. Please check the following code and output or check my codepen.
.box {
background: #fff000;
margin: 10px 0;
height: 200px;
}
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 push-md-6"><div class="box">Image</div></div>
<div class="col-md-6 pull-md-6"><div class="box">Content</div></div>
<div class="col-md-6"><div class="box">Image</div></div>
<div class="col-md-6"><div class="box">Content</div></div>
</div>
</div>
</body>
</html>
I have this simple scenario:
<div class="row">
<div class="col-md-12 col-lg-6 col-xl-7">A</div>
<div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>
basically if md
A
B
I would like it, if md
B
A
I have tried many variants found on web, like flex-first and whatnot.. can't seem to get it to work
Any ideas?
If you want to change order on md and larger sizes you can use order-md-, this is provided by bootstrap. It looks like, if you want to change order only on md size you will have to define normal order on one larger size Fiddle
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 order-md-2">A</div>
<div class="col-md-12 order-md-1">B</div>
</div>
It's also possible to use the flex- helper classes to solve this issue.
This solution allows you to reverse the order without the order count on the columns.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex-column-reverse flex-lg-row">
<div class="col-md-12 col-lg-6 col-xl-7">A</div>
<div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>
The flex-direction is now reversed by default (md) and will be overriden on the lg breakpoint.
For Bootstrap v4.1 you can use
<div class="row flex-row-reverse">
<div class="col-md-12 col-lg-6 col-xl-7">A</div>
<div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>
More information here: https://getbootstrap.com/docs/4.1/utilities/flex/#direction
Easiest solution will be:
.row{
flex-direction: row-reverse;
}
This works for me:
<div class="col-md order-1">First column</div>
<div class="col-md order-md-1">Second column</div>
Output on responsive state:
Second column
First column
I know the question is about Bootstrap 4, but I saw some people asking how to do it in version 5. Here's the example:
<div class="col-md-6 order-2 order-md-1">
<!-- YOUR CODE -->
</div>
<div class="col-md-6 order-1 order-md-2">
<!-- YOUR CODE -->
</div>
ref: https://getbootstrap.com/docs/5.0/layout/columns/#order-classes
For Bootstrap 5, the class names have changed to order-x where x is the order, i.e. (directly from the docs):
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
See more at https://getbootstrap.com/docs/5.0/layout/columns/#reordering