0

I tried a lot before creating this doubt, but I didn't find anything like that, I can't align a div vertically with the bootstrap, how can I do this?

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container text-center p-5">
  <h1 style="font-family: 'Montez', cursive; font-size: 100px;">Nome</h1>
  <p style="font-family: 'Montserrat'; font-size: 20px;">Dev</p>
  <a href="#" class="btn btn-primary col-lg-4 col-sm-4 col-md-4 rounded-pill font-weight-bold">PORTFÓLIO</a>
  <div class="mt-4">
    <a href="#">
      <i class="fa fa-instagram fa-2x"></i>
    </a>
    <a href="#">
      <i class="fa fa-linkedin fa-2x"></i>
    </a>
  </div>
</div>
Barthy
  • 3,151
  • 1
  • 25
  • 42
Fábio Stralioti Martins
  • 29
  • 3

3 Answers3

0

It is not elegant, but will work.

СSS:

.container{
  width: 50%;
  height: 100%;
  overflow: hidden;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
gorevanova
  • 539
  • 1
  • 7
  • 16
0

You can use css :

<div class="parent">
   <div class="inner"/>
</div>

where child is : 

.parent {
  display : flex;
  align-items : center;
  justify-content: center;
}
Imad Salki
  • 416
  • 3
  • 4
0

Aligning an element vertically is made very easy with flexbox. Use the class d-flex on the .col element inside the .row so it is displayed via display:flex. The class .flex-column forces the content to be flexed in a vertical way. .justify-content-center centers the element vertically. I applied a height of 300 px to the .col so you can see the effect.

You asked about centering it vertically. If you want to center it horizontally too, simply add align-items-center as a class to the col like so:

col bg-light d-flex flex-column justify-content-center align-items-center


.col {
  min-height:300px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="col bg-light d-flex flex-column justify-content-center">
      <h1>Nome</h1>
  </div>
      
</div>
J. Mann
  • 115
  • 6