CODEWITHSUNDEEP
twitter-bootstrapcsstwitter-bootstrap-3responsive-design
Rakesh
Rakesh

Reputation: 213

make button's responsive for all devices using bootstrap v3

<div class="row form-group">
  <div class="col-md-5 col-xs-4">
    <div class="form-group">
      <label class="col-md-5 control-label">Allowance Name: </label>
      <div class="col-md-7">
        <input type="text" name="" value="" class="form-control">
      </div>
    </div>
  </div>
  <div class="col-md-5 col-xs-4">
    <div class="form-group">
      <label class="col-md-5 control-label">Allowance Amount: </label>
      <div class="col-md-7">
        <input type="text" name="" value="" class="form-control">
      </div>
    </div>
  </div>
  <div class="col-md-2 col-xs-4">
    <div class="form-group">
      <label class="col-md-5 control-label hidden">Add or remove new line </label>
      <div class="col-md-7">
        <button type="button" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i></button>
        <button type="button" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i></button>
      </div>
    </div>
  </div>
</div>

I'm using the bootstrap v3+ , I have this code, and I have to make responsive to all the screen size. I had buttons, it is not become responsive, how would I do. Any help would be appreciated.

Upvotes: 0

Views: 583

Answers (1)

devfaysal
devfaysal

Reputation: 168

Sometimes bootstrap's built-in classes are not enough to make everything of your choice. You will have to make some override bootstrap CSS in the media query. Add following styles in your custom stylesheet and use the class btn-responsive (it is not bootstrap's class, I just like this class name) in your buttons. You can change the styles also to make changes in your buttons after observing in different versions of the screen.

@media (max-width: 768px) {
    .btn-responsive {
        padding:6px 6px;
        font-size:90%;
        line-height: 1;
        border-radius:3px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .btn-responsive {
        padding:4px 9px;
        font-size:90%;
        line-height: 1.2;
    }
}

Upvotes: 1

Related Questions