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:
- :first-child
- :last-child
- :nth-child()
- :nth-last-child()
The clear: left;
property forces the button to start a new row of the matrix. It's because the .btn
class has the float: left;
property.
Set up border-radius
and margin
properties in a similar way as the btn-group
class is described in the bootstrap.css file.
3×3 matrix
Please check the result:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* The heart of the matter */
.btn-matrix > .btn:nth-child(3n+4) {
clear: left;
margin-left: 0;
}
.btn-matrix > .btn:nth-child(n+4) {
margin-top: -1px;
}
.btn-matrix > .btn:first-child {
border-bottom-left-radius: 0;
}
.btn-matrix > .btn:nth-child(3) {
border-top-right-radius: 4px !important;
}
.btn-matrix > .btn:nth-last-child(3) {
border-bottom-left-radius: 4px !important;
}
.btn-matrix > .btn:last-child {
border-top-right-radius: 0;
}
/* Decorations */
.btn-matrix {
margin: 20px;
}
<div class="btn-group btn-matrix">
<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>
<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>
<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>
X×Y matrix
The code depends only on X:
.btn-matrix > .btn:nth-child(Xn+X+1) {
clear: left;
margin-left: 0;
}
.btn-matrix > .btn:nth-child(n+X+1) {
margin-top: -1px;
}
.btn-matrix > .btn:first-child {
border-bottom-left-radius: 0;
}
.btn-matrix > .btn:nth-child(X) {
border-top-right-radius: 4px !important;
}
.btn-matrix > .btn:nth-last-child(X) {
border-bottom-left-radius: 4px !important;
}
.btn-matrix > .btn:last-child {
border-top-right-radius: 0;
}
You can try the following:
<div class="row">
<div class="col-md-1 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="col-md-1 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="col-md-1 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>
Modified @Pranjal answer a bit because of following reason:
- the bootstrap grid (row, col-... etc) creates rows which are by definition 12 columns wide
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).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-default col-md-4">Button 1</button>
<button type="button" class="btn btn-default col-md-4">Button 2</button>
<button type="button" class="btn btn-default col-md-4">Button 3</button>
</div>
</div>
<div class="row">
<div class=" btn-group">
<button type="button" class="btn btn-default col-md-4">Button 4</button>
<button type="button" class="btn btn-default col-md-4">Button 5</button>
<button type="button" class="btn btn-default col-md-4">Button 6</button>
</div>
</div>
<div class="row">
<div class=" btn-group">
<button type="button" class="btn btn-default col-md-4">Button 7</button>
<button type="button" class="btn btn-default col-md-4">Button 8</button>
<button type="button" class="btn btn-default col-md-4">Button 9</button>
</div>
</div>
</div>
I Think this will be helpful to you.Try this one.
button{
margin-right:14px!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-default col-md-3">Button 1</button>
<button type="button" class="btn btn-default col-md-3">Button 2</button>
<button type="button" class="btn btn-default col-md-3">Button 3</button>
</div>
</div>
<div class="row">
<div class=" btn-group">
<button type="button" class="btn btn-default col-md-3">Button 4</button>
<button type="button" class="btn btn-default col-md-3">Button 5</button>
<button type="button" class="btn btn-default col-md-3">Button 6</button>
</div>
</div>
<div class="row">
<div class=" btn-group">
<button type="button" class="btn btn-default col-md-3">Button 7</button>
<button type="button" class="btn btn-default col-md-3">Button 8</button>
<button type="button" class="btn btn-default col-md-3">Button 9</button>
</div>
</div>
</div>
For Bootstrap 4 and if you have unequal text that needs to wrap.
.btn-matrix > .btn:nth-child(3n+4) {
clear: left;
margin-left: 0;
}
.btn-matrix > .btn:nth-child(n+4) {
margin-top: -1px;
}
.btn-matrix > .btn:first-child {
border-bottom-left-radius: 0;
}
.btn-matrix > .btn:nth-child(3) {
border-top-right-radius: 4px !important;
}
.btn-matrix > .btn:nth-last-child(3) {
border-bottom-left-radius: 4px !important;
}
.btn-matrix > .btn:last-child {
border-top-right-radius: 0;
}
/* Decorations */
.btn-matrix { flex-wrap: wrap; }
/* force wrap text */
.btn-matrix .btn{
white-space: normal !important;
}
<div class="btn-group btn-matrix">
<a class="btn btn-sm btn-default col-sm-4">Button 1 Extra Content</a>
<a class="btn btn-sm btn-default col-sm-4">Button 2</a>
<a class="btn btn-sm btn-default col-sm-4">Button 3</a>
<a class="btn btn-sm btn-default col-sm-4">Button 4</a>
<a class="btn btn-sm btn-default col-sm-4">Button 5</a>
<a class="btn btn-sm btn-default col-sm-4">Button 6</a>
<a class="btn btn-sm btn-default col-sm-4">Button 7</a>
<a class="btn btn-sm btn-default col-sm-4">Button 8</a>
<a class="btn btn-sm btn-default col-sm-4">Button 9</a>
</div>