Using Flex CSS and Bootstrap for a responsive layout - css

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

Related

CSS/Bootstrap Grid Row Alignment

I can't understand why this nested grid row has the space above it. I want to align it to the center. I'd like to just select and align to center much like Excel.
I have a fluid container with a nested grid row with three columns and another grid row nested in the first column, but its like I've pressed return and there's a space above it.
TIA!
gridrow alignment issues
.row>div:not(.row) {
background: #ddd;
}
.row .row>div {
background: pink;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xl-4">
<div class="row">
<div class="col-xl-6">Col content</div>
<div class="col-xl-6">Col content</div>
</div>
</div>
<div class="col-xl-4">Col content</div>
<div class="col-xl-4">Col content</div>
</div>
</div>
Don't use
<div class="container-fluid">
but use this
<div class="col-12 d-flex justify-content-center">
//like your code
</div>
col-12 is only an example, change with the number that you want.

how to re-order elements in bootstrap in a specific way

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>

How to center items inside a card [duplicate]

This question already has answers here:
How can I center elements horizontally or vertically with Twitter Bootstrap?
(12 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed last year.
I am trying to center my Container in the middle of the page using Bootstrap 4. I have been unsuccessful thus far. Any help would be appreciated.
I have built it at Codepen.io so you guys can play with it and let me know what works as I am about out of ideas...
var currentAuthor = "";
var currentQuote = "";
function randomQuote() {
$.ajax({
url: "https://api.forismatic.com/api/1.0/?",
dataType: "jsonp",
data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
success: function( response ) {
$("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
$("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
currentAuthor = response.quoteAuthor;
currentQuote = response.quoteText
}
});
}
function openURL(url){
window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}
function tweetQuote(){
openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}
$(document).ready(function () {
randomQuote();
$("#get-another-quote-button").click(function(){
randomQuote();
});
$('#tweet').on('click', function() {
tweetQuote();
});
});
html, body {
background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
background-color: #17234E;
margin-bottom: 0;
min-height: 30%;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
.btn-new-quote {
color: #0C0C0D;
background-color: transparent;
border-color: #414147;
}
.btn-new-quote:hover {
color: #0C0C0D;
background-color: #9A989E;
border-color: #0C0C0D;
}
#tweet {
color: RGB(100, 100, 100);
}
#tweet:hover {
color: RGB(50, 50, 50);
}
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
opacity: .85;
border-color: RGB(50, 50, 50);
padding-bottom: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
<div class="row justify-content-center align-self-center">
<div class="col-sm-6">
<div class="jumbotron vertical-center text-center">
<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
<p id="quote-author" class="lead"><em></em></p>
<hr class="my-2">
<div class="row align-items-center justify-content-between">
<div class="col-sm-1-4 text-left">
<a id="tweet" href="#">
<h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
</a>
</div>
<div class="col-sm-1-4 text-right">
<button id="get-another-quote-button" type="button" class="btn btn-outline-secondary btn-new-quote">Don't Quote Me on This...</button>
</div>
</div>
</div>
</div>
</div>
</div>
Important! Vertical center is relative to the height of the parent
If the parent of the element you're trying to center has no defined
height, none of the vertical centering solutions will work!
Now, onto vertical centering...
Bootstrap 5 (Updated 2021)
Bootstrap 5 is still flexbox based so vertical centering works the same way as Bootstrap 4. For example, align-items-center, justify-content-center or auto margins can used on the flexbox parent (row or d-flex).
use align-items-center on a flexbox row parent (row or d-flex)
use justify-content-center on a flexbox column parent (d-flex flex-column)
use my-auto on a flexbox parent
Vertical Center in Bootstrap 5
Bootstrap 4
You can use the new flexbox & size utilities to make the container full-height and display: flex. These options don't require extra CSS (except that the height of the container (ie:html,body) must be 100%).
Option 1 align-self-center on flexbox child
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
https://codeply.com/go/fFqaDe5Oey
Option 2 align-items-center on flexbox parent (.row is display:flex; flex-direction:row)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
</div>
https://codeply.com/go/BumdFnmLuk
Option 3 justify-content-center on flexbox parent (.card is display:flex;flex-direction:column)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
</div>
https://codeply.com/go/3gySSEe7nd
More on Bootstrap 4 Vertical Centering
Now that Bootstrap 4 offers flexbox and other utilities, there are many approaches to vertical
alignment. http://www.codeply.com/go/WG15ZWC4lf
1 - Vertical Center Using Auto Margins:
Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertical Center Using Auto Margins Demo
my-auto represents margins on the vertical y-axis and is equivalent to:
margin-top: auto;
margin-bottom: auto;
2 - Vertical Center with Flexbox:
Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
or, use align-items-center on the entire .row to vertically center align all col-* in the row...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Vertical Center Different Height Columns Demo
See this Q/A to center, but maintain equal height
3 - Vertical Center Using Display Utils:
Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Vertical Center Using Display Utils Demo
More examples
Vertical center image in <div>
Vertical center .row in .container
Vertical center and bottom in <div>
Vertical center child inside parent
Vertical center full screen jumbotron
Important! Did I mention height?
Remember vertical centering is relative to the height of the parent element. If you want to center on the entire page, in most cases, this should be your CSS...
body,html {
height: 100%;
}
Or use min-height: 100vh (min-vh-100 in Bootstrap 4.1+) on the parent/container. If you want to center a child element inside the parent. The parent must have a defined height.
Also see:
Vertical alignment in bootstrap 4
Bootstrap Center Vertical and Horizontal Alignment
you can vertically align your container by making the parent container flex and adding align-items:center:
body {
display:flex;
align-items:center;
}
Updated Pen
Using bootstrap version 5 or later, use the code below to center the content horizontally and vertically.
<div class="vh-100 d-flex justify-content-center align-items-center">
<h1>Centered horizontally and vertically!</h1>
</div>
Following bootstrap 4 classes helped me solve this
<div class="col text-center justify-content-center align-self-center">
<img width=3rem src=".." alt="...">
</div>
Because none of the above worked for me, I am adding another answer.
Goal: To vertically and horizontally align a div on a page using bootstrap 4 flexbox classes.
Step 1: Set your outermost div to a height of 100vh. This sets the height to 100% of the Veiwport Height. If you don't do this, nothing else will work. Setting it to a height of 100% is only relative to the parent, so if the parent is not the full height of the viewport, nothing will work. In the example below, I set the Body to 100vh.
Step 2: Set the container div to be the flexbox container with the d-flex class.
Step 3: Center div horizontally with the justify-content-center class.
Step 4: Center div vertically with the align-items-center
Step 5: Run page, view your vertically and horizontally centered div.
Note that there is no special class that needs to be set on the centered div itself (the child div)
<body style="background-color:#f2f2f2; height:100vh;">
<div class="h-100 d-flex justify-content-center align-items-center">
<div style="height:600px; background-color:white; width:600px;">
</div>
</div>
</body>
I did it this way with Bootstrap 4.3.1:
<div class="d-flex vh-100">
<div class="d-flex w-100 justify-content-center align-self-center">
I'm in the middle
</div>
</div>
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="row">
<div class="col-md-6">
<img src="/assets/images/ebook2.png" alt="" class="img-fluid">
</div>
<div class="col-md-6 my-auto">
<h3>Heading</h3>
<p>Some text.</p>
</div>
</div>
This line is where the magic happens <div class="col-md-6 my-auto">, the my-auto will center the content of the column. This works great with situations like the code sample above where you might have a variable sized image and need to have the text in the column to the right line up with it.
I've tried all the answers herefrom, but found out here is the difference between h-100 and vh-100
Here is my solution:
<div className='container vh-100 d-flex align-items-center col justify-content-center'>
<div className="">
...
</div>
</div >
<div class="col-lg-5 col-sm-5 offset-1 d-flex">
<div class="offer-txt justify-content-center align-self-center">
<span class="inner-title">Our Offer</span>
<h2 class="section-title">Today’s Special </h2>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
</div>
</div>
In Bootstrap 4 (beta), use align-middle. Refer to Bootstrap 4 Documentation on Vertical alignment:
Change the alignment of elements with the vertical-alignment
utilities. Please note that vertical-align only affects inline,
inline-block, inline-table, and table cell elements.
Choose from .align-baseline, .align-top, .align-middle, .align-bottom,
.align-text-bottom, and .align-text-top as needed.
<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row align-items-center justify-content-center" style="height:100vh;">
<div>Center Div Here</div>
</div>
</div>
</body>
</html>
Vertical align Using this bootstrap 4 classes:
Method1:
parent: d-table
AND
child: d-table-cell & align-middle & text-center
eg:
<div class="tab-icon-holder d-table bg-light">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>
and if you want parent be circle:
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>
which two custom css classes are as follow:
.tab-icon-holder {
width: 3.5rem;
height: 3.5rem;
}
.rounded-circle {
border-radius: 50% !important
}
Final usage can be like for example:
<div class="col-md-5 mx-auto text-center">
<div class="d-flex justify-content-around">
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Lg.png" height="30rem">
</div>
</div>
...
</div>
</div>
Method2:
You can use following:
parent: h-100 d-table mx-auto
AND
child: d-table-cell align-middle
Method3:
You can use following:
parent: d-flext align-items-center
also if you want content be center horisontally too:
parent: d-flext align-items-center justify-content-center
bootstrap 5 and blazor web assembly:
<div class="d-flex align-items-center justify-content-center min" style="height: 50vh">
<button class="btn btn-outline-success mx-2">Register</button>
<button class="btn btn-outline-primary mx-2" style="width:123.44px">Login</button></div>
/*You have to add height 100vh */
Center
use .my-auto (bootsrap4) css class on yor div
Place your content within a flexbox container that is 100% high i.e h-100. Then justify the content centrally by using justify-content-center class.
<section class="container h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<h1 class="display-3">Hello, Malawi!</h1>
</div>
</section>
in Bootstrap 5 we can do it easily. Below is an example to align card. We just have to set the card width, then the rest setting are using bootstrap 5 class.
<div class="container d-flex vh-100">
<div class="row mx-auto">
<div class="col align-self-center p-4">
<div class="card rounded-3 shadow-sm p-3" style="width:400px">
<div class="card-body">
<h1>I'am centered vertically and horizontally</h1>
</div>
</div>
</div>
</div>
</div>
For all Bootstrap versions 2, 3, 4 and 5 with only two custom classes suitable with any height and width.
.d_tbl{
display:table;
width:100%;
height:200px;
}
.d_tblCel{
vertical-align: middle;
display: table-cell;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="d_tbl" style="background-color:antiquewhite">
<div class="d_tblCel">
<h3>Centered horizontally and vertically</h3>
<p>for all bootstrap versions with only two custom classes</p>
</div>
</div>
</div>
</body>
</html>
In Bootstrap 4.1.3:
This worked for me when I was trying to center a bootstrap badge inside of a container > row > column next to a h1 title.
What did work was some simple css:
.my-valign-center {
vertical-align: 50%;
}
or
<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>

Bootstrap : Add a junction between div

I'm trying to add a junction (a line) between 2 divs in the middle.
<div class="row">
<div class="col-xs-6 col-md-6">
<div style="background-color:#f39a6f;width:100%;height:100px;">
....1
</div>
</div>
<div class="col-xs-6 col-md-6">
<div style="background-color:#ffff00;width:100%;height:100px;">
....2
</div>
</div>
Thanks for help.
Hope this code will solve your problem.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row no-gutters">
<div class="col-md-3">
<div class="card bg-success">
<div class="card-body"></div>
</div>
</div>
<div class="col-md-2">
<hr>
</div>
<div class="col-md-3">
<div class="card bg-danger">
<div class="card-body"></div>
</div>
</div>
</div>
My idea is to have the junction (a line) always be the center of a row via absolute/relative positioning, with lower z-index than what those color blocks have so that the line is hidden behind the blocks but shown between the blocks.
The tricky part is accurately calculate the position of the junction line, due to the fact that bootstrap rows have their own paddings. That's why it's better to use SCSS so that you can read bootstrap default values for row and column settings, and calculate the junction line based on those.
But for demo purpose, I will stick with CSS and "hardcode" the pre-configured values from bootstrap.
HTML Structure
<div class="row junction-row">
<div class="col-6 col-sm-3">
<div class="block bg-primary"></div>
</div>
</div class="col-6 col-sm-4 offset-sm-5">
<div class="block bg-danger"></div>
</div>
</div>
CSS
.junction-row {
height: 6rem;
position: relative;
}
.junction-row::after {
content: '';
position: absolute;
background-color: var(--danger);
height: 5%;
// Default bootstrap row's padding is 1rem.
// Width = 100% - left padding of the row - right padding of the row
width: calc(100% - 2rem);
// Top = total height 100% - the height of the line, and then divide by 2
// to have the line stay in the center of the row.
top: calc((100% - 5%) / 2);
// Left = starting after the row's left padding
left: 1rem;
// Any value here, but it needs to be lower than what .block has
z-index: 1;
}
.block {
position: relative;
height: 6rem;
z-index: 2;
}
Result
demo: https://jsfiddle.net/davidliang2008/vknor3cz/32/
I don't believe you can have this and have your column sizes at 6 each. I can think of 2 ways. Make them 5 and use this. This comes from their documentation on the grid system.
https://getbootstrap.com/docs/4.0/layout/grid/
<div class="row justify-content-between">
<div class="col-5">
One of two columns
</div>
<div class="col-5">
One of two columns
</div>
</div>
Or if you don't mind that junction being static width then you could do this. Effectively making the junction width static and each side equal in the remaining width.
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col-auto" style="width:30px"></div>
<div class="col">
2 of 2
</div>
</div>

Spacing / gap between two col-sm-6 inside an row and align it with the rest of the page

I'm trying to make some space / gap between 2x col-sm-6 inside an row. Have tried some methods from earlier posts here from Stack Overflow, but none seem to make the right result.
What I have tried:
<div class="row">
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
</div>
Well... this creates the right spacing, but then the left and right sides are not allign with the rest of the page content. To help you guys understand what I'm trying to explain, here is a picture.
Here you can see that the upper white content, the width is what I'm trying to keep for all the elements inside the page. I know its because the extra div I added, because the following code is producing the upper white content box you see in the picture, but then there is no spacing. Have also tried with col-md-5 and an offset of 2 but this creates too much spacing.
<div class="row">
<div class="col-sm-6 contentpage3">
</div>
<div class="col-sm-6 contentpage3">
</div>
</div>
What am I doing wrong?
You can do something like this.
All .col-* elements should be inside row elements.
All .col-* elements should contain content, not be content.
.example {
padding-bottom: 15px;
background: #ccc;
}
.example > .row > div {
margin-top: 15px;
}
.example .inside {
height: 50px;
background: #fff;
border: 1px solid #eee;
}
<div class="container-fluid example">
<div class="row">
<div class="col-xs-12">
<div class="inside"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="inside"></div>
</div>
<div class="col-xs-6">
<div class="inside"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

Resources