React Bootstrap: Vertical alignment of row's columns?
If you are using table rows, you can wrap contents within a <div>..</div>
like:
<tr>
<div classname="align-me"></div>
</tr>
and then you can use flexbox to align them dynamically:
tr .align-me {
display: flex;
align-items: center;
}
Centering elements in row (vertically) with react-bootstrap
There are many ways to center things in css: https://www.w3.org/Style/Examples/007/center.en.html
I would recommend you to use flexbox as much as possible, as it is powerful but simple tool. Many people just overuse grid. In your case you just stack vertically, so you have only one dimension.
When you work with bootstrap, you can use its utility classes: https://getbootstrap.com/docs/5.1/utilities/flex/
Also, when you use react-bootstrap, there is one abstraction more, called Stacks: https://react-bootstrap.netlify.app/layout/stack/#stacks
I have created a Sandbox. Please look into it and tell me, if it's something you are looking for, because I'm still unsure what you try to achieve: https://codesandbox.io/s/musing-satoshi-nhuood?file=/src/App.js
With "align-items" and "justify-content" you can center your content according to the axes. As isherwood mentioned in his comment h3 gets extra bottom margin. So when you want to have it centered to 100%, you have to remove it too.
Vertically center elements using React-Bootstrap
Here is my solution
Codesandbox
I have vertically centred content for the red section, using flexbox and putting some padding around it.
Since you are using bootstrap, I have used inbuilt bootstrap css classes.
Why will my SVG not vertically align in React Bootstrap?
This answer after testing appears to only work when applying it to text. After further paths down the rabbit hole and reading several Codepens and Codeplys around Bootstrap I was able to solve vertical image centering by targeting the Container
, component:
import React from 'react'
import { Container, Row, Col, Image } from 'react-bootstrap'
// SVG
import comingSoonSVG from './coming-soon.svg'
const ComingSoon = () => {
return (
<Container style={containerStyles}>
<Row>
<Col md={{ span: 6, offset: 3 }} className="d-flex justify-content-center">
<Image style={imgStyles} src={comingSoonSVG} alt="Coming Soon" />
</Col>
</Row>
</Container>
)
}
const containerStyles = {
minHeight: '100vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}
const imgStyles = {
height: '60vmin',
}
export default ComingSoon
Centering Image with react / react-bootstrap / flexbox
You can use the built in features of react bootstrap and implement something like this:
<Row className="justify-content-md-center">
<Col xs={12} sm={4} md={4}>
<LoginImage />
</Col>
</Row>`enter code here`
For reference to the docs, you can go here.
Perfectly center images in react column
Set the div containing the image to be the height of the viewport, then set its display property to flex. Then give the image a margin: auto
.
.tower-icon {
height: 100vh;
display: flex;
}
.img13 {
margin: auto;
height: auto;
width: 100%;
}
Vertical Align Center in Bootstrap 4
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
ord-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
Related Topics
Bootstrap Jumbotron Under Nav Bar
How to Vertically Align Two or More (Side by Side) Elements in a Div
CSS - Internet Explorer and The <Main> Tag Background
Bootstrap Navbar Overlapping Body Content
How to Make Same Layout for All Web Pages
Windows Phone 8 HTML5 Viewport Is Higher Than The Screen After Update to 8.0.10328.78
Keep Element Fixed While Safari Navigation Bar Collapes on iOS
Break an Absolutely Positioned Element Out of Its Relatively Positioned Ancestor
CSS, Stretching Vertically Div Until It Reach The Height of Its Parent
Svg Attributes Beaten by CSS&Style in Priority
How to Easily Change a Font-Sizing from Px to Em for a Big, Existing Site
Ie 10 Bug with Display Table CSS When Height Is 100%
Custom Fonts with Different Vertical Metrics Between Os's
How to Use Fastclick with Jquery Mobile The Right Way
Prevent CSS3 Flex-Shrink from Crushing Content
How to Override a #Id Ul Li Behaviour with a Class Definition