I have a <div> in Bootstrap 4.0 that I am using to display a row of buttons horizontally within the div. I have tried defining the btn-group elements as both <buttons> and <a role="button">, but no matter which way I do it, the left-most button appears misaligned:
https://i.sstatic.net/Hw1uK.png
When using the <a> approach, my div declaration looks like this:
<div class="btn-group btn-group-justified" id="hours-and-location">
<a href="#" class="btn btn-secondary btn-block" role="button">button</a>
<a href="#" class="btn btn-secondary btn-block" role="button">button</a>
<a href="#" class="btn btn-secondary btn-block" role="button">button</a>
</div>
If I declare them as <buttons>, it looks like this:
<div class="btn-group btn-group-justified align-self-center" id="hours-and-location">
<button type="button" class="btn btn-secondary btn-block h-100">Button 2</button>
<button type="button" class="btn btn-secondary btn-block h-100">Button 2</button>
<button type="button" class="btn btn-secondary btn-block h-100">Button 3</button>
</div>
I have tried adjusting margin, padding, using !important in CSS, and researching numerous CSS solutions. I have also inspected the elements in Firefox's developer tools but cannot determine why they are not aligned correctly.
I am open to any additional suggestions for resolving this issue. Ultimately, I just want some buttons to fill a div. If there is a simpler Bootstrap method to achieve this without overriding extensive CSS, I would appreciate the guidance. Thank you for your assistance.
As I write this, I realize that I forgot to include my CSS, and the problem arose even without my CSS (so I wasted time debugging CSS 😩🔫).
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<br>
<br>
<br>
<section class="container-fluid">
<div class="row vertical-center">
<div class="container-fluid">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="container-fluid">
<!-- <div class="row my-auto"> -->
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-8">
<div class="btn-group btn-group-justified align-self-center" id="hours-and-location">
<button type="button" class="btn btn-secondary btn-block h-100">Button 2</button>
<button type="button" class="btn btn-secondary btn-block h-100">Button 2</button>
<button type="button" class="btn btn-secondary btn-block h-100">Button 3</button>
</div>
<!-- <div class="btn-group btn-group-justified" id="hours-and-location">
<a href="#" class="btn btn-secondary btn-block" role="button">button</a>
<a href="#" class="btn btn-secondary btn-block" role="button">button</a>
<a href="#" class="btn btn-secondary btn-block" role="button">button</a>
</div> -->
</div>
</div>
</div>
</div>
</div>
</section>