Search code examples
htmlcssangularbootstrap-4centering

horizontally Center bootstrap 4 button toolbar in angular project

All I want to do is center the dang button toolbar horizontally. All I have so far is:

<div class="row">
  <div class="col-sm-6 mx-auto">
    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">Sign Up</button>
      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">Forgot Password?</button>
      </div>
    </div>
  </div>
</div>

Attached is an image of how it looks. Seems like there should be some boostrap class I can just add to make it work.enter image description here

Solution

  • You can apply this CSS rules to btn-toolbar class

    .btn-toolbar{
    text-align: center !important;
    display: Block !important;
}


    .btn-toolbar{
  text-align: center !important;
  display: Block !important;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6 mx-auto">
    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">Sign Up</button>
      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">Forgot Password?</button>
      </div>
    </div>
  </div>
</div>