CODEWITHSUNDEEP
csshtmltwitter-bootstrapbutton
Junior
Junior

Reputation: 12002

How to place buttons next to each other using css Bootstrap

I need to places some buttons in the same line next to each other. Also, I like to put a text input with a button all on the same line.

Here is what I have done

<div class="well">

        <table class="I3WorkAroundTable">
            <tr>
                <td>
                    <div class="inlinebox">

                        <button type="button" class="btn btn-primary scripter_header_button" id="MasterRequestBreak">Request Break</button>

                        <button type="button" class="btn btn-primary scripter_header_button" id="MasterReturnToCampaign">Return to Campaign</button>

                        <button type="button" class="btn btn-primary scripter_header_button" id="MasterRequestLogoff">Logout off Campaign</button>

                        <button type="button" class="btn btn-primary scripter_header_button previewCallOption" id="MasterSkip">Skip this Call</button>

                        <button type="button" class="btn btn-primary scripter_header_button previewCallOption" id="MasterPlace">Place this Call</button>

                    </div>

                </td>
                <td class="I3WorkAroundTableRight">

                    <div class="inlinebox">

                        <div class="input-group">
                            <input type="text" class="form-control" id="MasterAlternativePhoneNumber" style="width: 120px;">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="button">Dial</button>
                            </span>
                        </div>

                    </div>

                    <div class="inlinebox">

                        <button type="button" class="btn btn-primary scripter_header_button" id="MasterTransferCall">Transfer Call</button>

                        <button type="button" class="btn btn-primary scripter_header_button " id="MasterAnsweringMachine">Answering Machine</button>

                        <button type="button" class="btn btn-primary scripter_header_button " id="MasterWrongNumber">Wrong Number</button>

                    </div>
                </td>
            </tr>
        </table>

    </div>

However, where I added the following code it, shifted the last 3 buttons to the vertical center of the other buttons.

        <div class="inlinebox">

            <div class="input-group">
                <input type="text" class="form-control" id="MasterAlternativePhoneNumber" style="width: 120px;">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button">Dial</button>
                </span>
            </div>

        </div>

Here is my CSS code

.I3WorkAroundTable 
{
  width: 100%;
  padding: 0;
  margin: 0;
}

.I3WorkAroundTableRight
{
  min-width: 180px;
}

.inlinebox
{
  display: inline-block;
  *display: inline;
}

Here are some screenshots to show how they are not aligned enter image description here

enter image description here

enter image description here

UPDATED This is how the page looks inside a page which forces IE8 comparability view

enter image description here

Upvotes: 0

Views: 1735

Answers (1)

ohneir
ohneir

Reputation: 409

All the child elements contained inside your .inlinebox wrappers have varying line heights (some specified with relative units and others set with absolute pixel values) and are set to vertical-align: middle by default. As a quick fix specify the line-height and vertical-align properties on the .inlinebox class:

.I3WorkAroundTable {
  width: 100%;
  padding: 0;
  margin: 0;
}
.I3WorkAroundTableRight {
  min-width: 180px;
}
.inlinebox {
  display: inline-block;
  *display: inline;
  line-height: 1;
  vertical-align: top;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">
  <table class="I3WorkAroundTable">
    <tr>
      <td>
        <div class="inlinebox">
          <button type="button" class="btn btn-primary scripter_header_button" id="MasterRequestBreak">Request Break</button>
        </div>
      </td>
      <td class="I3WorkAroundTableRight">
        <div class="inlinebox">
          
          <div class="input-group" style="width: 160px">
            <input type="text" class="form-control" id="MasterAlternativePhoneNumber" >
            <span class="input-group-btn">
                <button class="btn btn-primary" type="button">Dial</button>
            </span>
          </div>
          </div>
        
        <div class="inlinebox">
          <button type="button" class="btn btn-primary scripter_header_button" id="MasterTransferCall">Transfer Call</button>
        </div>
      </td>
    </tr>
  </table>
</div>

I also moved the fixed width on your <input> element to the .input-group.

For better consistency across browsers, and since you're using Bootstrap already, you might consider using the Bootstrap grid for column based layouts instead of using <table>, or use block level elements with float:left instead of trying to align everything horizontally with display: inline-block.

Upvotes: 2

Related Questions