CODEWITHSUNDEEP
htmlcssasp.nettwitter-bootstraptwitter-bootstrap-3
Jonathan Wood
Jonathan Wood

Reputation: 67175

Trouble with Bootstrap Layout

I'm trying to style two buttons on the same row. On larger devices, I want each button to take up a third of a half of the display. On small devices, I want each button to take up the entire half of the display.

But when I did this, the buttons are not quite even. (One is slightly lower than the first).

enter image description here

Here is my markup.

<div class="row" style="margin-top: 12px">
    <div class="col-sm-6 text-center">
        <a id="prev-question" href="#" class="btn btn-success col-xs-6 col-sm-4 col-sm-offset-4">Previous</a>
    </div>

    <div class="col-sm-6 text-center">
        <a id="next-question" href="#" class="btn btn-success col-xs-6 col-sm-4 col-sm-offset-4 disabled">Next</a>
    </div>
</div>

Could someone help me out a bit here?

UPDATE:

To better clarify the layout I'm trying for, the following image shows roughly the layout on a tiny device (top) and a larger device (bottom). (It doesn't need to be this exactly, but because smaller devices have smaller screens, I wanted the buttons to be larger on those devices.)

enter image description here

Also, I suspect that the issue I'm seeing might be related to the fact that there is no margin between the buttons.

Upvotes: 1

Views: 52

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362290

You can put the buttons in nested grid columns like this..

<div class="row " style="margin-top: 12px">
    <div class="col-xs-6 text-center">
        <div class="row">
            <div class="col-xs-12 col-md-4 col-md-offset-4">
                <a id= "prev-question" href="#" class="btn btn-success btn-block">Previous</a>
            </div>
        </div>
    </div>
    <div class="col-xs-6 text-center">
        <div class="row">
            <div class="col-xs-12 col-md-4 col-md-offset-3">
                <a id="next-question" href="#" class="btn btn-success  btn-block">Next</a>
            </div>
        </div>
    </div>
</div>

http://www.codeply.com/go/kjjp1Ei1GM

Upvotes: 1

dippas
dippas

Reputation: 60543

First use .container as parent, then use xs instead of sm because xs it is for extra small devices.

.row {
  margin-top: 12px;
  border: red solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-6 text-center">
      <a id="prev-question" href="#" class="btn btn-success col-xs-12 col-md-4 col-md-offset-4">Previous</a>
    </div>

    <div class="col-xs-6 text-center">
      <a id="next-question" href="#" class="btn btn-success col-xs-12 col-md-4 col-md-offset-2">Next</a>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions