I am currently in the process of developing a seating chart application that I envision to look similar to this design: https://i.sstatic.net/vZ5Au.png
While exploring different options, I have some concerns about whether it can be fully accomplished using Bootstrap. One limitation I have come across is that the BS "container" class cannot be nested. Additionally, my goal is to have the entire chart automatically adjust to fit both the width and height of the viewport. My current approach involves utilizing a 5x5 HTML table with a BS grid inside each td element. However, I am facing challenges with aligning the elements correctly within the space provided (indicated by red bars in the diagram). Moreover, fitting all elements within the designated "row" (utilizing the BS "row" class) has proven to be problematic.
https://i.sstatic.net/uEMq1.png
<td style="white-space:nowrap">
<div class="row">
<div class="col-xs-3"><input id="39638" type="text" value=""></div><div class="col-xs-3"><label id="39638pc"><?php echo $part['39638'] ?></label></div>
<div class="col-xs-3"><input id="39638bt" type="text" value=""></div><div class="col-xs-3"><label id="39638bc"><?php echo $part['39638'] ?></div></label></div>
</div>
<div class="row">
<div class="col-xs-12"><label class="name-label">Opas</label></div>
</div>
<div class="row">
<div class="col-xs-4"><button class="btn btn-primary" type="button" onclick="participate(39638)">Good</button></div>
<div class="col-xs-4"><button class="btn btn-primary" type="button" onclick="behave(39638)">Bad</button></div>
<div class="col-xs-4"><button class="btn btn-primary" type="button" onclick="comelate(39638)">Late</button></div>
</div></td>
In my style.css:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
/* padding: 8px; */
}
.row .col-xs-3 {
display: inline-block;
float: none;
padding-left: 5px;
padding-right: 5px;
}
.row .col-xs-4 {
display: inline-block;
float: none;
padding: 0;
}
.row .col-xs-3 input, .row .col-xs-3 label {
width: 100%;
text-align: center;
background-color: pink;
}
.row .col-xs-4 button {
width: 95%;
padding: 0;
margin: 0;
}
td .row {
margin: 0px;
}
.name-label {
width: 100%;
font: bold 14px calibri, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}