While implementing Twitter Bootstrap on my website, I encountered a problem where elements start overlapping if the window size is reduced. This issue does not look appealing, and I expected Twitter Bootstrap to ensure that my website is fully responsive across all screen sizes.
https://i.sstatic.net/QAQBS.png
<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;
}
Could this be due to any mistake on my part?