This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
How to center content in a Bootstrap column?
(11 answers)
How do you get centered content using Twitter Bootstrap?
(24 answers)
Closed 10 months ago.
I have some basic HTML (zero CSS) which aims to display a title at the top of a page, then a piece of text in the center. This is my code:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="d-flex flex-column min-vh-100">
<h1 class="text-center my-4">Title</h1>
<div class="d-flex flex-grow-1 justify-content-center align-items-center">
<div>Centered!</div>
</div>
</div>
</div>
However, the top div seems to be offsetting the position of the middle one (I want the middle one centered in the page). Thanks for any help, I'm new to this!
A solution is to add the fixed-top to the h1. This way it stops consuming vertical space.
See below:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid">
<h1 class="text-center my-4 fixed-top">Title</h1>
<div class="d-flex flex-column min-vh-100">
<div class="d-flex flex-grow-1 justify-content-center align-items-center">
<div>Centered!</div>
</div>
</div>
</div>
Related
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 7 months ago.
I am trying to vertically align text in the middle of a row.
Below is what I have done. The vertical alignment is not working. How can I align the text vertically in the middle of the row?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row align-middle" style="min-height: 500px;">
<div class="col-6 bg-danger align-middle">
LEFT/MIDDLE TEXT
</div>
<div class="col-6 bg-primary align-middle">
RIGHT/MIDDLE TEXT
</div>
</div>
</div>
Use align-items-center because row is already display: flex
From the docs,
Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
...
To vertically center non-inline content (like <div>s and more), use our flex box utilities.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row align-items-center vh-100">
<div class="col-6 bg-danger">
LEFT/MIDDLE TEXT
</div>
<div class="col-6 bg-primary">
RIGHT/MIDDLE TEXT
</div>
</div>
</div>
In order to vertically center the contents of the .col-6 and not the .col-6 within the .row, use .col-6.d-flex.flex-column.justify-content-center. This makes the .col-6 a flex box container. You will notice in the example below that the height of the columns are the same as in your example, if this was not your intent then dippas' solution is perfectly fine.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row" style="min-height: 500px;">
<div class="col-6 bg-danger d-flex flex-column justify-content-center">
LEFT/MIDDLE TEXT
</div>
<div class="col-6 bg-primary d-flex flex-column justify-content-center">
RIGHT/MIDDLE TEXT
</div>
</div>
</div>
I am making a section that contain some text but i need the text in the right half of the section and on the left there is a background image for the section, so i made col-md-4 for the unused half because i don't wanna hide the background image and col-md-8 to the text, how to hide the col-md-4 section on the small screen and let the col-md-8 cover the whole section? iam using bootstrap 5
the code:
<!-- Bootstrap 4.1.x/Twitter Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="header-main row">
<div class="col-md-4"></div>
<div class="col-md-8 text-center d-flex flex-column justify-content-center align-items center">
<h1 class="first-font">MOBI TECH</h1>
<h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
<a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
</div>
</div>
the output on desktop:
the output on phones:
To hide element on particluar screen breakpoint use .d-sm-none .d-md-block
<!-- Bootstrap 4.1.x/Twitter Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="header-main row">
<div class="col-md-4 .d-sm-none .d-md-block"></div>
<div class="col-md-8 col-sm-12 text-center d-flex flex-column justify-content-center align-items center">
<h1 class="first-font">MOBI TECH</h1>
<h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
<a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
</div>
</div>
this will leave layout as you defined for md screens and hide firs div and make second div 12 cols wide on sm screens.
i've been struggling with this problem for the past two days. I have a web dashboard which displays charts or table on cards. These cards may have different size depending on which chart or table is rendered inside it. They are inside bootstrap nav tab content.
When i use a defined col size, such as col-md-3 or col-sm-4 or even only col evertyhing works just fine. However, when using col-auto, it "overflows" horizontally beyond the screen, row and even the container.
Below is the presentation code i removed from my angular app
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Bootstrap grid problem</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-11 col-md-11">
<ul class="nav nav-tabs border-0" id="tabMenu" role="tablist">
<li class="nav-item mr-1" *ngFor="let route of routeLinks; let i = index;">
<a class="nav-link" data-toggle="tab" (click)="activeLinkIndex = i" [ngClass]="{ 'active': activeLinkIndex === i, 'text-light': activeLinkIndex !== i, 'bg-azul-escuro': activeLinkIndex !== i,
'bg-cinza-claro': activeLinkIndex === i, 'text-azul-escuro': activeLinkIndex === i,
'font-weight-bold': activeLinkIndex === i }" [routerLink]="route.link">{{route.title}}</a>
</li>
</ul>
<div class="tab-content" id="tabMainContent">
<div class="tab-pane fade show active" id="central" role="tabpanel" aria-labelledby="central-tab">
<div class="row">
<div class="col-lg-12 col-md-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb m-0 bg-light rounded-0 ">
<fa-icon [icon]="faHome" class="mr-2 text-dark"></fa-icon>
<li class="breadcrumb-item">Main</li>
<li class="breadcrumb-item active" aria-current="page">Consolidated</li>
</ol>
</nav>
</div>
</div>
<div class="row bg-light py-3 rounded-top text-white">
<div class="col-auto bg-dark">
<div class="mx-3">
<p>
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns
will resize no matter the width of the center column.
</p>
</div>
</div>
<div class="col bg-dark">
<div class="mx-3">
<p>
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns
will resize no matter the width of the center column.
</p>
</div>
</div>
<div class="col bg-dark">
<div class="mx-3">
<p>
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns
will resize no matter the width of the center column.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 4 years ago.
I'm using Bootstrap 4 and I would like to center container content, which means it showing exactly on the center of the screen. However, my content is still stuck on the top side, even if height is 100% and I use justify-content-center align-items-center
Image:
<!doctype html>
<html lang="en" class="h-100">
<head>
...
</head>
<body class="h-100">
<header>
...
</header>
<main class="h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center">
<div class="col">
<!-- Title -->
<div class="row text-center">
<div id="title" class="w-100 mt-5">
<h1>Let's Find You a Great Apartment.</h1>
</div>
</div>
<!-- Subtitle -->
<div class="row text-center">
<div id="subtitle" class="w-100">
<h2><small>Join more than 5,828,476 happy renters searching 1,025,792 local apartments.</small></h2>
</div>
</div>
<!-- Search box -->
<div class="row w-100 align-items-center">
<div id="search" class="enterALocationSearchBox mt-2">
<input type="text" class="w-100" placeholder="Enter a Location here">
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" />
</body>
</html>
You don't even need bootstrap for that.
You can use position: relative for parent div and position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); for child then the child will be in middle of parent. But remember to set parent height and width to correct value.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
More info about css centering here
If you insist on using bootstrap for that, you need to specify height of parent div to make vertical centering working.
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 5 years ago.
I see Bootstrap 4 now uses flex-box for vertical alignment. See Here
I've got Bootstrap Version 4.0.0-alpha.6 linked on my site yet I still can't get it working like in the example above.
My code is:
<div class="container-fluid header">
<div class="row align-items-center">
<div class="col-md-2 logo">
<h2>Logo</h2>
</div>
<div class="col-md-6">
<nav class="nav">
<span>Nav</span>
</nav>
</div>
</div>
</div>
Would anyone know what I'm doing wrong?
My links:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
I works fine, but only if the col elements are smaller then the parent row element.
The alignment will just handle where the elements are placed within the available space. If both heights are equal there is no difference.
Please provide additional css codes if existent for further help.
.row{
background: #aaa;
height: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid header">
<div class="row align-items-center">
<div class="col-md-2 logo">
<h2>Logo</h2>
</div>
<div class="col-md-6">
<nav class="nav">
<span>Nav</span>
</nav>
</div>
</div>
</div>