CODEWITHSUNDEEP
csshtmltwitter-bootstrap-3
Yanick Rochon
Yanick Rochon

Reputation: 53606

Bootstrap : align button addons over multiple rows

One of the form I'm creating is to add contact information for a given supplier. The part of the form is dynamic and looks like this

enter image description here

But, as you can see, the dropdown buttons are dynamically resized to fit the content. I thought using some kind of table layout, but I'm afraid that will not play nice with Bootstrap's CSS.

Bottom line is, has anyone done this before, and what was your solution?

Upvotes: 2

Views: 1270

Answers (1)

Tim Lewis
Tim Lewis

Reputation: 29297

As stated in my comments, there's a number of different approaches. First, using a table:

<table class="table table-responsive table-striped table-bordered">
  <tbody><tr>
    <td>
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
          Phone
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cell</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Fax</a></li>
        </ul>
      </div>
    </td>
    <td>
      <input class="form-control" type="text">
    </td>
    <td>
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
    </td>
  </tr>
  <tr>
    <td>
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
          Cell
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Phone</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Fax</a></li>
        </ul>
      </div>
    </td>
    <td>
      <input class="form-control" type="text">
    </td>
    <td>
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
    </td>
  </tr>
  <tr>
    <td>
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
          Business Fax
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Phone</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cell</a></li>
        </ul>
      </div>
    </td>
    <td>
      <input class="form-control" type="text">
    </td>
    <td>
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
    </td>
  </tr>
</tbody></table>

Second using the Grid System:

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2">
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
          Phone
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Fax</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cell</a></li>
        </ul>
      </div>
    </div>
    <div class="col-xs-8">
      <input class="form-control" type="text">
    </div>
    <div class="col-xs-2">
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
          Cell
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Phone</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Fax</a></li>
        </ul>
      </div>
    </div>
    <div class="col-xs-8">
      <input class="form-control" type="text">
    </div>
    <div class="col-xs-2">
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
          Business Fax
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Phone</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cell</a></li>
        </ul>
      </div>
    </div>
    <div class="col-xs-8">
      <input class="form-control" type="text">
    </div>
    <div class="col-xs-2">
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
    </div>
  </div>
</div>

And here's a bootply with the live example:

Bootply

Hope that gives you some insight! You can also try custom CSS if you just want the buttons to be the same width, but you'd have to know the length of each segment of text first, which my be tricky.

Edit

I should also note, putting a <table> inside a container (modal, panel, conatiner, container-fluid, ect) will make it conform to that container's max width, so the table doesn't have to be full screen.

Upvotes: 2

Related Questions