Center card vertically on background using Bootstrap

Question

Just to make it clear before flagging as repost, all this doesn't work : How to center cards in bootstrap 4? How to align an image dead center with bootstrap Centering the image in Bootstrap How can I center an image in Bootstrap? How do I center an image in Bootstrap? How to align a <div> to the middle (horizontally/width) of the page How to horizontally center a <div>?

Having said that, my issue is simple, I have two divs, the background div and the card div from bootstrap. mx-auto will center vertically just fine, however impossible to unfix from the top the card. So that I also have space above and below the card. I've tried all m and p classes. As well as custom classes. Could someone help me please. I would like my card to be in the middle of the screen.

<div class="bg">
<div class="card card-design success-design mx-auto">
<div class="card-body">

Now it looks like this:

ooooxxxoooo
ooooxxxoooo
ooooooooooo
ooooooooooo

I would like :

ooooooooooo
ooooxxxoooo
ooooxxxoooo
ooooooooooo

You "images" show that you want to center it vertically, but you're talking about "horizontally". — Styx, Jan 05 '19 at 12:07
well this is the limit of language, I thought about it, and it seems that both can be true at the same time — 2095377, Jan 05 '19 at 12:09

score 1 · Answer 1 · answered Jan 05 '19 at 11:47

1

You might need to use some CSS to get the body to stretch to full height, so you can center the card, this is an example using flexbox

html, body {
 height: 100%;
}

body {
 margin: 0;
 display: flex;
 align-items: center;
 justify-content: center;
}

.card {
 padding: 1rem;
 border: 1px solid;
}

<div class="card">I am a card</div>

answered Jan 05 '19 at 11:47

Andrei Voicu

740
1
6
13

Thanks, this made my background image stop being diplayed beyond the card. However the card is still attached to the top. – 2095377 Jan 05 '19 at 11:51
could you provide a code example? maybe codepen. It would help better understand the issue – Andrei Voicu Jan 05 '19 at 11:52
here is a codepen but the generated display is false of course https://codepen.io/ilanoh/pen/rodvVM – 2095377 Jan 05 '19 at 12:00

score 1 · Accepted Answer · answered Jan 05 '19 at 12:04

try this:

body, html {
  height: 100%;
}

h3, h4, p, a, label {
        color: #001f3f;
}

.bg {
  /* The image used */
  background-image: url('exemple.png');

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* i added following code */
  display:flex;
  justify-content:center;
  align-items:center;
}

.card-design {
        background-color: rgba(245, 245, 245, 0.7);
        width: 23rem;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        border-radius: 0 !important;
}

.success-design {
        background-color: rgba(245, 245, 245, 0.8);
}

.nbr-apt {
        font-size: 220%;
        font-weight: 100;
}

.rdv {
        font-size: 160%;
}

.num {
        font-weight: bold;

<body>
        <div class="bg">
                <div class="card card-design success-design mx-auto">
                        <div class="card-body">
                        <h3 class="card-title"> bla bla bla</h3>
                        <h4 class="card-subtitle mb-2 text-muted"> bla bla bla</h4>
                        <h4 class="card-subtitle mb-2 text-muted"> bla bla blam</h4>
                        <br>
                        <br>
                        <p class="card-text nbr-apt">Merci bla bla bla</p>
                        </div>
                </div>
        </div>
  </body>

with 3 line code. i added in `.bg { }` i showed there. – doğukan Jan 05 '19 at 12:11 — doğukan, Jan 05 '19 at 12:11

score 1 · Answer 3 · answered Jan 05 '19 at 12:19

If you're using Bootstrap 4 then you should utilize its utility classes.

Just add d-flex justify-content-center align-items-center classes to the root div and its content will be centered horizontally and vertically:

.bg {
  background-color: #fff0f0;
  width: 300px;
  height: 300px;
}

.card {
  width: 50%;
  height: 50%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="bg d-flex justify-content-center align-items-center">
  <div class="card">
    <div class="card-header">My card</div>
    <div class="card-body">Some text</div>
  </div>
</div>

Center card vertically on background using Bootstrap

3 Answers3