CODEWITHSUNDEEP
htmlcssangularjstwitter-bootstraplayout
ErEcTuS
ErEcTuS

Reputation: 867

How to organize my Buttons in Row layout and full width

I would like to have my two divs(Up and down buttons) organized in a layout row side by side and taking the full widh of the page. right now, they are organized like this : enter image description here

My HTML is this :

 <div layout="row">
    <div class="btn btn-info btn-lg" width="50%;">
        <span class="glyphicon glyphicon-menu-up"></span> Up
    </div>
    <div class="btn btn-info btn-lg" width="50%;">
        <span class="glyphicon glyphicon-menu-down"></span> Down
    </div>
</div>

Upvotes: 0

Views: 274

Answers (2)

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Something like this

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div layout="row">
  <div class="col-xs-6">
    <div class="btn btn-block btn-info btn-lg">
      <span class="glyphicon glyphicon-menu-up"></span> Up
    </div>
  </div>
  <div class="col-xs-6">
    <div class="btn btn-block btn-info btn-lg">
      <span class="glyphicon glyphicon-menu-down"></span> Down
    </div>
  </div>
</div>

Upvotes: 1

Blady214
Blady214

Reputation: 739

If you are using boostrap you can do it in following way:

<div class="row">
    <div class="col-md-6">

        <div class="btn btn-info btn-lg btn-full-width">
            <span class="glyphicon glyphicon-menu-up"></span> Up
        </div>

    </div>

        <div class="col-md-6">

            <div class="btn btn-info btn-lg btn-full-width">
                <span class="glyphicon glyphicon-menu-down"></span> Down
            </div>

    </div>


</div>

CSS:

.btn-full-width { width: 100%; }

Edit: added CSS class for buttons.

Upvotes: 1

Related Questions