Space between bootstrap buttons

Question

Space between bootstrap buttons

Navigation

#1 by (2 votes)

1

Greetings to all I am adding buttons to my html page with bootstrap 3.7 which looks good:

The problem arises when viewing it in mobile devices, that is, the space that is displayed horizontally is lost in the mobiles:

That way you can see on mobile devices, the code I use is the following:

 <div class="row">
    <div class="col-md-2">
      <a href="javascript:void(0)" class="btn btn-block btn-primary btn-xs" data-toggle="modal" data-target="#modalAgregarCuenta">
        <i class="fa fa-plus"> Agregar</i> 
      </a>
    </div>
    <div class="col-md-2">
      <a href="#" class="btn btn-block btn-success btn-xs"><i class="fa fa-file-excel-o"> Reporte</i></a>
    </div>
  </div>

Maybe I am using bootstrap badly, I would appreciate your help in advance .. !!

html bootstrap

asked by Diego Avila 29.11.2018 в 17:22

source

1 answer

Error using d3: "d3 is not defined" The 'onreadystatechange' method of XMLHttpRequest is not executed

score 2 · Accepted Answer

The bootstrap classes to indicate the columns are grouped according to the size of the screen. For Bootstrap 3.3.7 you have the following :

Container width   None (auto)   750px       970px       1170px
Class prefix      .col-xs-      .col-sm-    .col-md-    .col-lg-

When the screen is 970px wide (or more), the class col-md-2 acts. Once the screen is reduced, that class has no effect and the buttons occupy 100% of the width (each).

Try putting the following:

<div class="row">
    <div class="col-md-2 col-xs-6">
      <a href="javascript:void(0)" class="btn btn-block btn-primary btn-xs" data-toggle="modal" data-target="#modalAgregarCuenta">
        <i class="fa fa-plus"> Agregar</i> 
      </a>
    </div>
    <div class="col-md-2 col-xs-6">
      <a href="#" class="btn btn-block btn-success btn-xs"><i class="fa fa-file-excel-o"> Reporte</i></a>
    </div>
  </div>

So the two buttons should be in the same row