-1

The card is supposed to be at the center of the screen but its not, why is it so ??

I'm using bootstrap 4.5

<div class="container">
 <div class="row">
   <div class"col"></div>
    <div class="col-8">
     <div class="card">
      <div class="card-body">
       This is some text within a card body.
      </div>
     </div>      
    </div>
   <div class"col"></div>
 </div>
</div>
Prateek Gupta
  • 2,422
  • 2
  • 16
  • 30

4 Answers4

0

Try adding below css in your css file

  .card {
            margin: 0 auto; 
            float: none; 
    }

or try mx-auto bootstrap 4 css class

Vikas Jadhav
  • 4,597
  • 2
  • 19
  • 37
0

Not sure it should be centered, by default. But you can achieve Horizontal Alignment with css class justify-content-center which you can add to row:

<div class="container">
  <div class="row justify-content-center">
    <!-- You don't need empty col before and after in this case :) -->
    <div class="col-8">
     <div class="card">
      <div class="card-body">
       This is some text within a card body.
      </div>
     </div>      
    </div>

  </div>
</div>

Also, pay attention that you have a small error here: <div class"col"></div>, maybe this is just a typo and in the real code it is like <div class="col"></div> :)

ikos23
  • 4,879
  • 10
  • 41
  • 60
0

The col class you added before the col-8 has no content so won't actively control the spacing of your col-8 column. One way of ensuring this column will sit in the centre of your container (which effectively has 12 available slots to be filled with bootstrap content) is to use an offset class like this:

<div class="container">
 <div class="row">
   
    <div class="col-8 offset-2">
     <div class="card">
      <div class="card-body">
       This is some text within a card body.
      </div>
     </div>      
    </div>
   
 </div>
</div>

You could use css styles alone, but that would mean the bootstrap layout that you had applied would be extra, unnecessary code. You can then use flex utility classes to centre the card content within that container, depending on how you want that to be justified.

Have look at the docs here - https://getbootstrap.com/docs/4.0/layout/overview/

Matt Reynolds
  • 467
  • 2
  • 5
0

I think you have not added bootstrap 4 CDN i.e (Content Delivery Network)

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

you have to add this CDN in your project HTML page under <head></head> tag after adding you can use with two option


First Option

<div class="container">
  <div class="row">

    <div class="col-12 center">
     <div class="card">
      <div class="card-body">
       This is some text within a card body.
      </div>
     </div>      
    </div>

  </div>
</div>

add this CSS in your css file

.center{
  display: flex;
  justify-content: center;
  align-items: center;
}

Second Option

Bootstrap 4 already gives a class justify-content-center

<div class="container">
  <div class="row justify-content-center">
    <div class="col-8">
     <div class="card">
      <div class="card-body">
       This is some text within a card body.
      </div>
     </div>      
    </div>

  </div>
</div>

You can check preview Here

Kiran Mistry
  • 2,614
  • 3
  • 12
  • 28