Elements are overlapping each other even though I use twitter bootstrap - html

Question

I am using twitter bootstrap on my site, I noticed that elements are overlapping if I make my window smaller. This does not look nice and I thought twitter bootstrap should make my website full responsive on all sizes.
<div class="main row">
<div class="col-sm-6">
<center><h3>Firmware Download</h3></center>
<!-- Main Buttons -->
<div class="row">
<div class="col-sm-6">
<button class="mainButtons" id="downloadFW">Download newest firmware to the server</button>
<button class="mainButtons" id="reboot">Reboot server</button>
</div>
<div class="col-sm-6">
<button class="mainButtons" id="deleteLogfile">Delete logfile</button>
<button class="mainButtons" id="deleteTemplateStatusFile">Delete status file</button>
</div>
</div>
<!-- Template Generierung -->
<div class="templateButtons col-sm-12">
<h4>Create Template</h4>
<select id="firmwareTemplate">
<option value="mb">MB</option>
<option value="bm">BM</option>
</select>
<select id="fileType">
<option value="ova">OVA</option>
<option value="vhd">VHD</option>
</select>
<button id="generateTemplate">Template erstellen</button>
</div>
</div>
<div class="codeBox col-sm-6">
<h5>Ausgabe:</h5>
<pre id="codeOutput">-</pre>
</div>
</div>
CSS:
body {
margin: 20px;
}
.codeBox {
border: 1px solid black;
overflow-y: scroll;
}
.codeBox code {
/* Styles in here affect the text of the codebox */
font-size:0.9em;
/* You could also put all sorts of styling here, like different font, color, underline, etc. for the code. */
}
.lineTop {
height: 1px;
background-color: #D8D8D8;
margin-top: 20px;
}
.lineBottom {
height: 1px;
background-color: #D8D8D8;
margin-bottom: 20px;
}
.lineNoMargin {
height: 2px;
background-color: #D8D8D8;
}
.main {
height: 350px;
margin-left: 20px;
}
.mainButtons {
min-width: 300px;
text-align:left;
}
.templateButtons {
margin-top: 50px;
margin-left: 12px;
}
#templateStatusOutput {
min-height: 240px;
}
#deleteTemplateStatusFile {
visibility: hidden;
}
.statusBarContainer {
border: 1px solid #D8D8D8;
padding-right: 0;
padding-left: 0;
}
.statusBar {
height: 20px;
background-color: #5cb85c;
width: 0;
color: white;
}
#statusBarTemplateStatus {
background-color: green;
}
#statusBarCopyStatus {
background-color: orangered;
}
.makeSpace50 {
height: 50px;
}
#statusBar1 {
visibility: hidden;
}
#statusBar2 {
visibility: hidden;
}
Is this my fault?

Answer 1

you use absolute value in your css, for example:
.mainButtons {
min-width: 300px;
text-align:left;
}
Try using relative value like percentage for example, so that the element can keep the bootstrap's responsiveness:
.mainButtons {
min-width: 100%;
text-align:left;
}
-------------- UPDATE -------------------
looking at your code here:
<div class="main row">
<div class="col-sm-6">
<center><h3>Firmware Download</h3></center>
<!-- Main Buttons -->
<div class="row">
<div class="col-sm-6">
<button class="mainButtons" id="downloadFW">Download newest firmware to the server</button>
<button class="mainButtons" id="reboot">Reboot server</button>
</div>
<div class="col-sm-6">
<button class="mainButtons" id="deleteLogfile">Delete logfile</button>
<button class="mainButtons" id="deleteTemplateStatusFile">Delete status file</button>
</div>
</div>
// ......
First you divide the screen into two part, <div class="main row"><div class="col-sm-6"> ...., then you divide again the first part of the screen into two again <!-- Main Buttons --><div class="row"><div class="col-sm-6">..., this mean the button only has 1/4 of your screen as its space. If that 1/4 space is less than 300px, as it is the min-width of your mainButtons, then your problem occured.