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>
Related
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>
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 am trying to give border to div with bootstrap 4 border. With only border property it is appearing weird while with other properties no border is showing up. Please find the code snippet below.
I have tried with the beta 2 version also.
Let me know if I am missing something.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<!-- Just created a contianer to test the border class -->
<div class="container">
<div class="text-center">
<h1> Testing bootstrap 4</h1>
</div>
<div class="row mt-2">
<div class="col-12">
<!-- Testing span with class border -->
<span class="border">
<div class="text-primary">Testing Bootsrap 4 Border </div>
</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-0">Testing Bootsrap 4 Border 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-top-0">Testing Bootsrap 4 Border top 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-right-0">Testing Bootsrap 4 Border right 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-12">
<span class="border border-light">testing border light</span>
</div>
<div class="col-sm-12"> col 2</div>
</div>
</div>
</body>
</html>
For bootstrap border to work, you have to add the border class. So for example, when you write <span class="border-right-0"> It is stating that no border should be to the right. You haven't stated a border to begin with though so no border is going to show. What you need to do is <span class="border border-right-0">.
It's the Subtractive border so first, you will need a border so you need to include the border class first.
<span class="border border-top-0"></span>
To see it in more effect try this:
<span class="border border-top-0 p-2 border-primary">Border</span>
Using contextual classes and padding utilities you can easily get the difference.
Hey you just need to add some classes for showing the border i.e. border border-primary, border border-secondary etc.
And class "border border-0" means no border.
In class="border border-light", "border-light" is another contextual border color.
Below are useful classes:
A list of contextual border color you can use the below classes:
border-primary
border-secondary
border-white
border-dark
border-light
border-info
border-warning
border-danger
border-success
If you want to get easier then try https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp or https://v4-alpha.getbootstrap.com/utilities/borders/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<title>Home</title>
</head>
<body>
<!-- Just created a contianer to test the border class -->
<div class="container">
<div class="text-center">
<h1> Testing bootstrap 4</h1>
</div>
<div class="row mt-2">
<div class="col-12">
<!-- Testing span with class border -->
<span class="border">
<div class="text-primary">Testing Bootsrap 4 Border </div>
</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-0 border border-primary">Testing Bootsrap 4 Border 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border border-primary border-top-0">Testing Bootsrap 4 Border top 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border border-danger border-right-0">Testing Bootsrap 4 Border right 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-12">
<span class="border border-light">testing border light</span>
</div>
<div class="col-sm-12"> col 2</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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
This question already has answers here:
Vertical alignment in Bootstrap 4
(2 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 5 years ago.
Reading the Bootstrap docs you can get to the alignment examples section.
It tells you can use use flexbox alignment utilities to vertically and horizontally align columns as Bootstrap CSS classes align-items-start, align-items-center and align-items-end but when I'm trying it the content is not vertically aligned as expected with a full height container, see the following code:
html,
body {
height: 100%;
}
.fill {
min-height: 100%;
height: auto !important;
height: 100%;
background-color: lightblue;
}
.col {
border: 1px solid red;
}
<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">
<div class="container fill">
<div class="row align-items-start">
<div class="col text-center">
align-items-start
</div>
</div>
<div class="row align-items-center">
<div class="col text-center">
align-items-center
</div>
</div>
<div class="row align-items-end">
<div class="col text-center">
align-items-end
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<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 expected to have align-items-center content on the vertical middle and align-items-end at the bottom of the container.
What I'm doing wrong or what I misunderstood?
In order to vertically align items in flex-container you need to give height to flex-container.
.row{
min-height:100px;
}
html,
body {
height: 100%;
}
.fill {
min-height: 100%;
height: auto !important;
height: 100%;
background-color: lightblue;
}
.col {
border: 1px solid red;
}
.row{
min-height:100px;
}
<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">
<div class="container fill">
<div class="row align-items-start">
<div class="col text-center">
align-items-start
</div>
</div>
<div class="row align-items-center">
<div class="col text-center">
align-items-center
</div>
</div>
<div class="row align-items-end">
<div class="col text-center">
align-items-end
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<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>
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>