CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4
bbgg2017
bbgg2017

Reputation: 187

Bootstrap 4 - 4 buttons (2 x row) in the same button group responsive

I would to define a one button group in bootstrap 4 with 4 buttons inside, two buttons for row. (RESPONSIVE)

enter image description here

Upvotes: 1

Views: 5445

Answers (3)

Vrijraj Singh
Vrijraj Singh

Reputation: 95

<div class="container">
   <div class="row">
        <div class="col-md-6">
            <button class="btn btn-primary">Btn1</button>
        </div>
        <div class="col-md-6">
            <button class="btn btn-primary">Btn1</button>
        </div>
   </div>      <div class="row">
        <div class="col-md-6">
            <button class="btn btn-primary">Btn1</button>
        </div>
        <div class="col-md-6">
            <button class="btn btn-primary">Btn1</button>
        </div>
   </div>
</div>

Upvotes: 0

HDP
HDP

Reputation: 4221

You can try following structural with Grid System for that. 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="form-row">
<div class="col">
  <button class="btn btn-primary btn-block" type="submit" >Filtri</button>
</div>
<div class="col">
  <button class="btn btn-primary btn-block" type="submit" >Filtri</button>
</div>
  </div>
  <div class="form-row mt-2">
<div class="col">
  <button class="btn btn-primary btn-block" type="submit" >Filtri</button>
</div>
<div class="col">
  <button class="btn btn-primary btn-block" type="submit" >Filtri</button>
</div>
  </div>
</div>

Another Example with Button group:

(Here, You will not get space between 2 button in one row.)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="btn-group">
  <button class="btn btn-primary" type="submit" >Filtri</button>
  <button class="btn btn-primary" type="submit" >Filtri</button>
</div>
<div class="w-100 mb-3"></div>
<div class="btn-group">
  <button class="btn btn-primary" type="submit" >Filtri</button>
  <button class="btn btn-primary" type="submit" >Filtri</button>
</div>

Upvotes: 0

carkod
carkod

Reputation: 2230

.box {
  background-color: #3C8DBC;
  color: #fff;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="box col">Filtri</div>
    <div class="box col">Filtri</div>
    <div class="w-100"></div>
    <div class="box col">Filtri</div>
    <div class="box col">Filtri</div>
  </div>
</div>

Here you can see more: https://getbootstrap.com/docs/4.1/layout/grid/#equal-width

Furthermore, you can insert an iconfont before Filtri to add the filter icon. E.g.:

<div class="box col"><span class="icon"></span>Filtri</div>

Upvotes: 1

Related Questions