css - Bootstrap space between rows -


this question has answer here:

i put space between rows buttons (three buttons in each row). in example each row inside div element marked bootstrap class btn-toolbar.

i know can solve problem using inline styling , put parameter margin-top or writing custom css class wondering if there bootstrap class this?

code:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>        <br/>            <button type="button" class="btn btn-primary" style="margin-right:30px;">nazaj</button>                <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>             <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-down"></span></button>            <input type="text" class="form-control" style="width:50px;display:inline-block;position:relative;top:1px;"/><h2 style="display:inline-block;position:relative;top:5px;padding-left:3px;">/</h2>  <input type="text" class="form-control" style="width:50px;display:inline-block;position:relative;top:1px;"/>      <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>             <button type="button" class="btn btn-primary" style="margin-right:30px;"><span class="glyphicon glyphicon-arrow-down" ></span></button>       <button type="button" class="btn btn-success">shrani</button>    <br/>  <br/>  <div class="btn-toolbar">  <button type="button" class="btn btn-primary col-sm-1">1/2</button>  <button type="button" class="btn btn-primary col-sm-1">1/2</button>  <button type="button" class="btn btn-primary col-sm-1">1/2</button>   <button type="button" class="btn btn-primary col-sm-1">1/2</button>   <button type="button" class="btn btn-primary col-sm-1">1/2</button>  </div>    <div class="btn-toolbar">  <button type="button" class="btn btn-primary col-sm-1">1/2</button>  <button type="button" class="btn btn-primary col-sm-1">1/2</button>  <button type="button" class="btn btn-primary col-sm-1">1/2</button>   <button type="button" class="btn btn-primary col-sm-1">1/2</button>   <button type="button" class="btn btn-primary col-sm-1">1/2</button>  </div>    <div class="btn-toolbar">  <button type="button" class="btn btn-primary col-sm-1">1/2</button>  <button type="button" class="btn btn-primary col-sm-1">1/2</button>  <button type="button" class="btn btn-primary col-sm-1">1/2</button>   <button type="button" class="btn btn-primary col-sm-1">1/2</button>   <button type="button" class="btn btn-primary col-sm-1">1/2</button>  </div>                  

you can use form-group give space of 15px give vertical space.

if want give space between col-md-column-* use col-md-offset-*

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>        <br/>            <button type="button" class="btn btn-primary" style="margin-right:30px;">nazaj</button>                <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>             <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-down"></span></button>            <input type="text" class="form-control" style="width:50px;display:inline-block;position:relative;top:1px;"/><h2 style="display:inline-block;position:relative;top:5px;padding-left:3px;">/</h2>  <input type="text" class="form-control" style="width:50px;display:inline-block;position:relative;top:1px;"/>      <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>             <button type="button" class="btn btn-primary" style="margin-right:30px;"><span class="glyphicon glyphicon-arrow-down" ></span></button>       <button type="button" class="btn btn-success">shrani</button>    <br/>  <br/>  <div class="btn-toolbar form-group">  <button type="button" class="btn btn-primary col-sm-1">1/2</button>  <button type="button" class="btn btn-primary col-sm-1">1/2</button>  <button type="button" class="btn btn-primary col-sm-1">1/2</button>   <button type="button" class="btn btn-primary col-sm-1">1/2</button>   <button type="button" class="btn btn-primary col-sm-1">1/2</button>  </div>    <div class="btn-toolbar form-group">  <button type="button" class="btn btn-primary col-sm-1">1/2</button>  <button type="button" class="btn btn-primary col-sm-1">1/2</button>  <button type="button" class="btn btn-primary col-sm-1">1/2</button>   <button type="button" class="btn btn-primary col-sm-1">1/2</button>   <button type="button" class="btn btn-primary col-sm-1">1/2</button>  </div>    <div class="btn-toolbar form-group">  <button type="button" class="btn btn-primary col-sm-1">1/2</button>  <button type="button" class="btn btn-primary col-sm-1">1/2</button>  <button type="button" class="btn btn-primary col-sm-1">1/2</button>   <button type="button" class="btn btn-primary col-sm-1">1/2</button>   <button type="button" class="btn btn-primary col-sm-1">1/2</button>  </div>                  


Comments

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

c# - Selenium Authentication Popup preventing driver close or quit -

tensorflow when input_data MNIST_data , zlib.error: Error -3 while decompressing: invalid block type -