CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Lechucico
Lechucico

Reputation: 2102

Bootstrap button group justified not working

I have the following code:

<div class="btn-group btn-group-justified">
    <a class="btn btn-success" href="{% url 'interface:data' user_id 24 %}"> 24h </a>
    <a class="btn btn-success" href="{% url 'interface:data' user_id 12 %}"> 12h </a>
    <a class="btn btn-success" href="{% url 'interface:data' user_id 4 %}"> 4h </a>
</div>

I get the following result: enter image description here

Why I don't get this result? enter image description here

Upvotes: 1

Views: 3757

Answers (2)

Robert
Robert

Reputation: 6967

As others have indicated, .btn-group-justified was depreciated in Bootstrap 4. In the Migration documentation we are provided an alternative:

Removed .btn-group-justified. As a replacement you can use <div class="**btn-group d-flex**" role="group"></div> as a wrapper around elements with .w-100.

https://getbootstrap.com/docs/4.0/migration/#button-group

Utilizing this new setup your code would look like this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="btn-group d-flex" role="group">
  <a class="btn btn-success w-100" > 24h </a>
  <a class="btn btn-success w-100" > 12h </a>
  <a class="btn btn-success w-100" > 4h </a>
</div>

Upvotes: 4

Plastic
Plastic

Reputation: 21

Looks like the .btn-group-justified class has been removed from Bootstrap 4 (source)

You can accomplish the same thing with just a little bit of CSS:

HTML:

<div class="btn-group btn-group-justified">
    <a class="btn btn-success" > 24h </a>
    <a class="btn btn-success" > 12h </a>
    <a class="btn btn-success" > 4h </a>
</div>

CSS:

a {
   width:100%;
}
div {
   width:100%;
}

Upvotes: 0

Related Questions