css - Bootstrap space between rows -
this question has answer here:
- space between buttons bootstrap class 3 answers
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
Post a Comment