How to make bootstrap buttons full width on resize only - html

Question

I have a set of 4 inline buttons at the top of my page, under a jumbotron.
2 are dropdowns, the others are just regular buttons.
when i resize the browser window, I'd like to make them change to vertical stacked, full width. i know adding the class btn-block will make them full width, but i only want this to happen when the window size is less than 768px.
here's my current code. thanks so much!
<div class="row">
<div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</div>
<div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Archives <b class="caret"></b></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</div>
<button class="btn btn-primary"><i class="fa fa-question-circle fa-fw"></i> Info </button>
<button class="btn btn-primary"><i class="fa fa-envelope fa-fw"></i> Sign Up</button>
</div>

Answer 1

You could use a media query to apply the full width buttons at 768 pixels or less..
#media (max-width: 768px) {
.btn,.btn-group {
width:100%;
}
}
Demo: http://bootply.com/98570

Answer 2

I'd recommend making a new class for these buttons, instead of overriding bootstrap.
.btn-mobile {
width:100%;
}
#media (min-width: 768px) {
.btn-mobile {
width: auto;
}
}
These extra styles aren't answering your question exactly, but if your intent is to use them on mobile, you may find the buttons too close together/skinny for mobile use (fingers are much fatter than mouse pointers).
.btn-mobile {
width:100%;
margin: 8px 0;
font-size:18px;
line-height:1.33;
border-radius:6px;
padding:10px 16px;
}
#media (min-width: 768px) {
.btn-mobile {
width: auto;
font-size:14px;
line-height: 1.428571429;
padding:6px 12px;
}
}