Why will my SVG not vertically align in React Bootstrap?

Question

Playing with React Bootstrap I'm unable to get my SVG to center vertically. The component:

ComingSoon.js:

import React from 'react'

import { Container, Row, Col, Image } from 'react-bootstrap'

// SVG
import comingSoonSVG from './coming-soon.svg'

const ComingSoon = () => {
  return (
    <Container className="h-100">
      <Row className="align-items-center">
        <Col md={{ span: 8, offset: 2 }}>
          <Image src={comingSoonSVG} alt="Coming Soon" />
        </Col>
      </Row>
    </Container>
  )
}

export default ComingSoon

app.js:

import React from 'react'

import 'bootstrap/dist/css/bootstrap.min.css'

// Components
import ComingSoon from './components/ComingSoon'

const App = () => {
  return (
    <>
      <ComingSoon />
    </>
  )
}

export default App

Per my research this should work based on:

You can apply any of Bootstrap's classes to a React Bootstrap component. *

so I referenced Vertical alignment and even added and removed row from <Row className="row align-items-center"> but it still will not work.

Reading other Q&As I've read:

Bootstrap Vertical Align Image (Think this is Bootstrap 3 and not 4)
React Bootstrap - how to center image vertically in a row when using <Row className="justify-content-md-center row"> it doesn't vertically center the image and throws it to the right slightly.

Other reads:

Found no solution or examples in the docs.

In React Bootstrap how can I vertically align an image in a column?

score 0 · Answer 1 · answered Dec 12 '20 at 03:10

Don't think that the SVG is causing the problem, since it's in an image tag.

I've try to replicate you code, and to make it work you'll have to define a height for your container (like 300px rather then 100%) and then define the row with h-100.

I've made some examples on codepen on how does align-items-center works with different types of content.

This one has two columns and both of the columns has content.

<div class="container">
  <div class="row align-items-center">
    <div class="col-md-6">
      <h1>Title</h1>
    </div>
    <div class="col-md-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula viverra erat vitae ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus sodales felis, at facilisis lorem laoreet nec. Duis at tempus tellus, sed mollis odio. Nunc turpis urna, elementum ac nulla a, tincidunt imperdiet elit. Donec sit amet accumsan nulla, sit amet lacinia eros. Proin non velit id velit dapibus tristique. Mauris elementum quam a ultricies facilisis. Cras ligula leo, rhoncus eget dignissim ac, sagittis eu est. Pellentesque ut justo eget justo feugiat fringilla. Nunc vel congue lorem.
         Nunc sit amet turpis arcu. In vitae maximus justo, vitae eleifend ante. Sed efficitur rhoncus turpis ut semper. Vivamus libero sapien, semper vel sapien nec, eleifend imperdiet justo. Maecenas vulputate turpis risus, non tristique mi scelerisque eu. Mauris elementum ipsum eu quam rhoncus, id tempor sem volutpat. Nunc scelerisque rutrum lectus, nec porttitor elit vehicula eu. Praesent tempor diam sit amet elit porta suscipit.
         Nullam accumsan tincidunt aliquet. Mauris pulvinar quam at urna vehicula ullamcorper volutpat eget ante. Curabitur scelerisque neque felis, id imperdiet ex tincidunt non. Sed quis ullamcorper sapien, at placerat turpis. Aenean at mauris vitae est iaculis scelerisque. Pellentesque consectetur lacinia ante, ac volutpat leo laoreet in. Vivamus fringilla, odio eu porttitor consequat, mauris ligula sodales magna, vel pulvinar nunc sem at eros. Nullam sed feugiat ante. Quisque aliquam facilisis efficitur. Nunc laoreet id risus luctus accumsan. Curabitur id cursus ante. Vivamus quis eros quis ligula aliquet tempus.</p>
    </div>
  </div>
</div>

This other one has only one column, so I had to specify a height for the container.

<div class="container ">
  <div class="row align-items-center h-100">
    <div class="col-md-6">
      <h1>Title</h1>
    </div>
  </div>
</div>

<style>
.container {
  height: 300px;
}
</style>

Hope this clarifies and also help you on how to align the items on your code.

1) Neither one of these apply to an image. 2) Both approaches do not use react-bootstrap. — DᴀʀᴛʜVᴀᴅᴇʀ, Dec 12 '20 at 16:41

score 0 · Accepted Answer · answered Dec 12 '20 at 17:17

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

Why will my SVG not vertically align in React Bootstrap?

2 Answers2