CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap-3
Barrosy
Barrosy

Reputation: 1457

How could I evenly split up buttons on a single line using HTML and CSS?

In my HTML code I am trying to create a couple buttons inside a modal. I am using Bootstrap for this. Within the footer part, I am trying to split these buttons evenly among the width of the modal (or modal footer).

I could be using Bootstrap columns to achieve this but the padding (between the elements containing the .col-* class) might be a bit too big for this purpose. I could assign a width but this does not split the elements evenly among the amount of space available.

This is what I tried so far:

$(document).ready(function() {
  $(".modal").modal();
});
.foo {
  /* Hardcoded width, how could I make it that when adding buttons, width is split among amount of buttons? */
  float: left;
  width: 30%;
  margin: 0 5px;
}

.bar {
  /* Not working to center the buttons: */
  margin: 0 auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>&hellip;</p>
      </div>
      <div class="modal-footer">
        <!-- Content with three evenly spread/divided buttons on a single line -->
        <div class="bar">
          <div class="foo">
            <button type="button" class="btn btn-default btn-block">Button 1</button>
          </div>
          <div class="foo">
            <button type="button" class="btn btn-default btn-block">Button 2</button>
          </div>
          <div class="foo">
            <button type="button" class="btn btn-default btn-block">Button 3</button>
          </div>
        </div>
        <!-- End of content -->
      </div>
    </div>
  </div>
</div>

JSFiddle

Setting the width to a 30% obviously does not always make the buttons split evenly (e.g. if I add another button, the buttons are not evenly spread anymore). Also notice that the buttons are somewhat leaning to the left. I Would like the buttons to grow with the size of the modal (a.k.a. responsiveness). What is the best way to split/spread the buttons on a single line within the Modal's footer?

Upvotes: 1

Views: 963

Answers (2)

Imad Ullah
Imad Ullah

Reputation: 1238

You can use This Bootstrap for It:

    <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">Button 1</button>

      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">Button 2</button>

      </div>
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">Button 3</button>
      </div>
    </div>

I you want to add another button you can do it.

    <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">Button 1</button>

      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">Button 2</button>

      </div>
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">Button 3</button>
      </div>
      <div class="btn-group" role="group" aria-label="Fourth group">
        <button type="button" class="btn btn-secondary">Button 4</button>
      </div>
    </div>

Upvotes: 0

Nandita Sharma
Nandita Sharma

Reputation: 13417

Add display: flex on the bar div and add flex: 1 0 auto; on the child divs

You won't require 30% width then.

.bar {
  display: flex;
}

.bar > div {
  flex: 1 0 auto;
}


$(document).ready(function() {
  $(".modal").modal();
});
.foo {
  margin: 0 5px;
}

.bar {
  display: flex;
}

.bar>div {
  flex: 1 0 auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>&hellip;</p>
      </div>
      <div class="modal-footer">
        <!-- Content with three evenly spread/divided buttons on a single line -->
        <div class="bar">
          <div class="foo">
            <button type="button" class="btn btn-default btn-block">Button 1</button>
          </div>
          <div class="foo">
            <button type="button" class="btn btn-default btn-block">Button 2</button>
          </div>
          <div class="foo">
            <button type="button" class="btn btn-default btn-block">Button 3</button>
          </div>
        </div>
        <!-- End of content -->
      </div>
    </div>
  </div>
</div>

Updated jsfiddle

Upvotes: 2

Related Questions