Taking up Horizontal Space and Vertical space in Bootstrap Column - html

Question

I have this setup here:
As you can see the Left Option Button is big and that's how I need all the buttons to be. They need to be lined up next to each other as I use the Bootstrap grid system with 3x4 columns. The button is currently the size it is (and doesn't take up all available horizontal space) because I applied this line to my HTML:
style="width: 400%; height: 500%;"
It was simply to provide a visual aid for what I'm aiming to do. I'm fairly new with bootstrap so learning how to style it is a bit tricky for me. Below is my html. Do I need CSS to achieve what I want above? If so, do I need to hardcode how "tall" I want the buttons to be or can I use some sort of relative method to do so, so that I won't run into problems if the site is viewed on a mobile phone?
I also need to place a text in the button that scales up properly but I'm sure that's doable once the buttons are scaled correctly?
<div class="categories-container">
<div class="container">
<div class="row">
<div class="col-md-4">
<form role="button">
<div class="input-group">
<input type="button" class="btn btn-primary btn-lg" value="Option" name="category-gameplay-btn" id="category-gameplay-btn">
</div>
</form>
</div>
<div class="col-md-4">
<form role="button">
<div class="input-group">
<input type="button" class="btn btn-primary btn-lg" value="Option" name="category-editor-btn" id="category-editor-btn">
</div>
</form>
</div>
<div class="col-md-4">
<form role="button">
<div class="input-group">
<input type="button" class="btn btn-primary btn-lg" value="Option" name="category-editor-btn" id="category-editor-btn">
</div>
</form>
</div>
</div>
</div>
</div>

Answer 1

Here are two example of what I think you're trying to do.
1) Uses a Justified button group instead of the grid and uses media queries to adjust to the viewport size.
2) Uses the grid like in your example and then just uses media queries to adjust to the viewport size.
See example Snippet.
.btn.btn-bg {
height: 300px;
font-size: 60px;
}
#media (max-width: 767px) {
.btn.btn-bg {
height: 150px;
font-size: 30px;
}
}
#media (max-width: 480px) {
.btn.btn-bg {
height: 75px;
font-size: 22px;
}
}
#media (max-width: 360px) {
.btn.btn-bg {
height: 35px;
font-size: 15px;
}
}
/*Second Sample*/
.btn.btn-bg2 {
height: 300px;
font-size: 60px;
}
#media (max-width: 767px) {
.btn.btn-bg2 {
height: 60px;
font-size: 30px;
}
}
#media (max-width: 480px) {
.btn.btn-bg2 {
height: 45px;
font-size: 20px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="well">
<form role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
</div>
</div>
<div class="categories-container">
<div class="container">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-bg">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-bg">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-bg">Right</button>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="well">
<form role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
</div>
</div>
<div class="categories-container">
<div class="container">
<div class="row ">
<div class="col-sm-4">
<input type="button" class="btn btn-primary btn-lg btn-block btn-bg2" value="Option" name="category-gameplay-btn" id="category-gameplay-btn">
</div>
<div class="col-sm-4">
<input type="button" class="btn btn-primary btn-lg btn-block btn-bg2" value="Option" name="category-editor-btn" id="category-editor-btn">
</div>
<div class="col-sm-4">
<input type="button" class="btn btn-primary btn-lg btn-block btn-bg2" value="Option" name="category-editor-btn" id="category-editor-btn">
</div>
</div>
</div>
</div>

Answer 2

To get the width you need to set the button and the div it is in to have 100% width:
.btn, .input-group {
width: 100%;
}
For the height you can use css and scale the height with the viewport size using vw in css or, if you're willing, you could use jquery to make the height directly proportional to the width:
$(document).ready(btnHeight);
$(window).on('resize', btnHeight);
function btnHeight() {
var width = $('.btn').width();
$('.btn').css('height', width*0.8);
};
To scale the font size you could use vw or just use media queries.
http://www.bootply.com/atAkVSnhQc