I'm creating a simple browser game as part of my web development learning process. I have a set of divs that represent a warrior, and at the head of the "div table" I have a group of 4 buttons arranged horizontally. However, when the screen size is reduced, the buttons do not stay in the same row. Additionally, there are white spaces between the buttons, but I want them to dynamically fill the entire button group even if there are fewer than 4 buttons. Can anyone provide assistance with this?
Check out my code on jsfiddle:
.div-TableHeadName {
padding-top:6px;
height:35px;
background-color: darkgrey;
}
.div-TableHeadClass {
padding-top:6px;
background-color: darkgrey;
height:35px;
}
.div-TableBodyImage{
height:160px;
background-color: lightgrey;
}
.div-TableBodyDescription{
height: 160px;
background-color: lightgrey;
}
.btn--actionType{
background-color: lightgrey;
border-radius: 0 !important;
height: 35px;
width: 25%
}
.btn--actionType:hover{
background-color: red;
}
.btn--performAction{
background-color: black;
border-radius: 0 !important;
color: white;
height: 35px;
width: 25%
}
.btn--group{
cursor:pointer;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="div-Table">
<div class="col-md-2 col-sm-2 col-xs-2 div-TableHeadName">
<span>Guldan</span>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 div-TableHeadClass">
<span>Warrior</span>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<btn-group data-toggle="buttons" class="btn--group">
<div class="btn btn--actionType">
<label>
<input type="radio" name="action" value="sword"/>Sword
</label>
</div>
<div class="btn btn--actionType">
<label>
<input type="radio" name="action" value="axe"/>Axe
</label>
</div>
<div class="btn btn--actionType">
<label>
<input type="radio" name="action" value="bow"/>Bow
</label>
</div>
<div type="button" class="btn btn--performAction">Attack
</div>
</btn-group>
</div>
</div>
<div style="padding-top:10px" class="col-md-2 col-sm-2 col-xs-2 div-TableBodyImage">
<img src="https://upload.wikimedia.org/wikipedia/en/b/b1/Portrait_placeholder.png" width="100"/>
</div>
<div style="padding: 10px" class="col-md-10 col-sm-10 col-xs-10 div-TableBodyDescription">
<span>This is a description for Guldan, an orc warrior.</span>
</div>
</body>