0

I am using Bootstrap 4! I have one row with 2 columns, how can I center the second column(col-8)?

<div class="row main-nav">
    <div class="col-1">
        <a (click)="returnPreviousPage()" class="main-nav-button">
            <span><i class="fa fa-chevron-left"></i></span>
        </a>
    </div>
    <div class="col-8 text-center">
        <div class="main-nav-logo">
            <h3 class="header-main">Some Title Here</h3>
        </div>
    </div>
</div>
Jeroen
  • 1,168
  • 1
  • 12
  • 24
Tzimpo
  • 964
  • 1
  • 9
  • 24

1 Answers1

2

Use mx-auto class for horizontally centering

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="row main-nav">
<div class="col-1">
    <a (click)="returnPreviousPage()" class="main-nav-button">
        <span><i class="fa fa-chevron-left"></i>Hi</span>
    </a>
</div>
<div class="col-8 text-center mx-auto">
    <div class="main-nav-logo">
        <h3 class="header-main">Some Title Here</h3>
    </div>
</div>
</div>

</body>
</html>
Znaneswar
  • 3,329
  • 2
  • 16
  • 24