I have something like that:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="btn-group">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Button 4</button>
<button type="button" class="btn btn-default">Button 5</button>
<button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Button 7</button>
<button type="button" class="btn btn-default">Button 8</button>
<button type="button" class="btn btn-default">Button 9</button>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
And I would like to have matrix of buttons 3x3. One more thing, left and right side must look like this example (straight lines):
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">button</button>
<button type="button" class="btn btn-default">button</button>
<button type="button" class="btn btn-default">button</button>
</div>
</div>
How I can make it? Maybe I need to add some bootstrap class or edit css file?
One group of buttons + few pseudo-classes
Use only one block with the
.btn-group
class.Apply a set of CSS properties by using of pseudo-classes:
The
clear: left;
property forces the button to start a new row of the matrix. It's because the.btn
class has thefloat: left;
property.Set up
border-radius
andmargin
properties in a similar way as thebtn-group
class is described in the bootstrap.css file.3×3 matrix
Please check the result:
X×Y matrix
The code depends only on X:
Modified @Pranjal answer a bit because of following reason:
Because of this we create a div with class row for each row of 3 buttons. Also, we want the buttons the be 1/3 of the width of the row (12 columns) so we give it the class "col-md-4" (12 divided by 3).
You can try the following:
For Bootstrap 4 and if you have unequal text that needs to wrap.
I Think this will be helpful to you.Try this one.