CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Gerta Xhepi
Gerta Xhepi

Reputation: 57

how to make a buttons group responsive?

So far my HTML and CSS. The button should be inline and also to have different colors. I have use also media queries but didn't work.

.btn-defoult{
  width:450px; 
  height: 50px;
  background-color: #d9d9d9;

}
.btn-defoult1{
  width:450px; 
  height: 50px;
  background-color: #e3e1e1;

}
.btn-defoult2{
  width:450px;
  height: 50px; 
  background-color: #e9e9e9;

}
 <div class="btn-group">
          <button class="btn btn-defoult btn-responsive">Get here</button>
          <button class="btn btn-defoult1 btn-responsive">News</button>
          <button class="btn btn-defoult2 btn-responsive">Downloads</button> 
        </div>
   </div>

Upvotes: 2

Views: 1201

Answers (3)

Madvillain
Madvillain

Reputation: 86

Use something along the lines of this code, perhaps tweak the values a bit, but this is your answer, your problem is that it stops being responsive from 500px and down right?

Below code is to give you an idea of what it would be, it's not tested

@media screen and (min-width: 100px) and (max-width:  540px) {
.btn-group {
width: 100%;
}

Upvotes: 2

BrendanMullins
BrendanMullins

Reputation: 587

i changed your css a bit, if the window is smaller than the (width) 450px the buttons will be (max-width) 100% of the width

.btn-group button {
  width: 100%; 
  max-width: 450px;
  display: block;
  height: 50px;
}
.btn-defoult{
  background-color: #d9d9d9;
}
.btn-defoult1{
  background-color: #e3e1e1;
}
.btn-defoult2{
  background-color: #e9e9e9;
}
 <div class="btn-group">
          <button class="btn btn-defoult btn-responsive">Get here</button>
          <button class="btn btn-defoult1 btn-responsive">News</button>
          <button class="btn btn-defoult2 btn-responsive">Downloads</button> 
</div>

Upvotes: 0

Luis Gonz&#225;lez
Luis Gonz&#225;lez

Reputation: 3559

From the official Bootstrap's website:

<div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Get here</button>
    <button type="button" class="btn btn-default">News</button>
    <button type="button" class="btn btn-default">Download</button>
</div>

Upvotes: 0

Related Questions