Can someone help me with the code to the exact table as shown in image using bootstrap studio?
Am new to web development. Please help me with the code only for this table and rest of the page I will develop on my own.
Thanks in advance.
P.S. For the sample image click here: https://www.dropbox.com/s/rk65hgk1wxzzjsh/table.jpg?dl=0
The following HTML is not a table but a responsive layout somewhat close to the picture. It more of a concept but could be used. You would need to actually fill in all the correct inputs and form setting to make an actual functioning form.
<div class="container">
< h3>Order Your Library Here</h3>
<div class="libraryOrderForm">
< form>
<div class="row">
<div class="col-md-12">
< p><strong>Select Library, Licensing scheme and required Port. Confirm order and pay with credit card. Software will be delivered in 48 hours.</strong>< /p>
<hr />
</div>
<div class="col-sm-2">
< span><strong>Product</strong>< /span>
< span class="hidden-sm hidden-md hidden-lg"><strong>:</strong>< /span>
</div>
<div class="col-sm-1 hidden-xs">
< span><strong>:</strong>< /span>
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="radio">
<label class="control-label">
<input type="radio" /><strong>Modbus Master Library</strong>
</label>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="radio">
<label class="control-label">
<input type="radio" /><strong>Modbus Slave Library</strong>
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
< span><strong>Licensing</strong>< /span>
< span class="hidden-sm hidden-md hidden-lg"><strong>:</strong>< /span>
</div>
<div class="col-sm-1 hidden-xs">
< span><strong>:</strong>< /span>
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="radio">
<label class="control-label">
<input type="radio" /><strong>Unlimited Single Embedded Product</strong>
</label>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="radio">
<label class="control-label">
<input type="radio" /><strong>Unlimited Multiple Embedded Product</strong>
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
< span><strong>Ports</strong>< /span>
< span class="hidden-sm hidden-md hidden-lg"><strong>:</strong>< /span>
</div>
<div class="col-sm-1 hidden-xs">
< span><strong>:</strong>< /span>
</div>
<div class="col-sm-4">
<div class="form-group">
<select class="form-control">
<option value="Generic Win32" selected>Generic Win32</option>
<option value="13">This is item 2</option>
<option value="14">This is item 3</option>
</select>
</div>
</div>
<div class="col-sm-5 hidden-xs">
< span> < /span>
</div>
</div>
<div class="row">
<div class="col-sm-2">
< span><strong>FC Support</strong>< /span>
< span class="hidden-sm hidden-md hidden-lg"><strong>:</strong>< /span>
</div>
<div class="col-sm-1 hidden-xs">
< span><strong>:</strong>< /span>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="form-group">
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC01 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC02 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC03 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC04 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC05 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC06 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC15 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC16 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>Choose All</strong></label>< /span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-4">
< span><strong>Grand Total</strong>< /span>
< span class="hidden-sm hidden-md hidden-lg"><strong>:</strong>< /span>
</div>
<div class="col-sm-1 hidden-xs">
< span><strong>:</strong>< /span>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-8">
< p><strong>N / A</strong>< /p>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
< p>
<button class="btn btn-primary" type="button">Submit</button>
< /p>
</div>
</div>
</form>
</div>
</div>
This is built using a table with the responsive table component. Once again somewhat like the picture but neither are exactly like it, mainly concepts on what you could do or come close to etc...
<div class="container">
< h3>Order Your Library Here</h3>
< form>
<div class="table-responsive libraryOrderForm">
<table class="table">
<thead>
<tr>
<th colspan="4">Select Library, Licensing scheme and required Port. Confirm order and pay with credit card. Software will be delivered in 48 hours.</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Product</strong></td>
<td><strong>:</strong></td>
<td>
<div class="form-group">
<div class="radio">
<label class="control-label">
<input type="radio" /><strong>Modbus Master Library</strong>
</label>
</div>
</div>
</td>
<td>
<div class="form-group">
<div class="radio">
<label class="control-label">
<input type="radio" /><strong>Modbus Slave Library</strong>
</label>
</div>
</div>
</td>
</tr>
<tr>
<td><strong>Licensing</strong></td>
<td><strong>:</strong></td>
<td>
<div class="form-group">
<div class="radio">
<label class="control-label">
<input type="radio" /><strong>Unlimited Single Embedded Product</strong>
</label>
</div>
</div>
</td>
<td>
<div class="form-group">
<div class="radio">
<label class="control-label">
<input type="radio" /><strong>Unlimited Multiple Embedded Product</strong>
</label>
</div>
</div>
</td>
</tr>
<tr>
<td><strong>Ports</strong></td>
<td><strong>:</strong></td>
<td colspan="2">
<div class="form-group maxWidthSelect">
<select class="form-control">
<option value="Generic Win32" selected>Generic Win32</option>
<option value="13">This is item 2</option>
<option value="14">This is item 3</option>
</select>
</div>
</td>
</tr>
<tr>
<td><strong>FC Support</strong></td>
<td><strong>:</strong></td>
<td colspan="2">
<div class="form-group maxWidthCheckboxes">
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC01 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC02 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC03 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC04 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC05 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC06 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC15 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>FC16 </strong></label>< /span>
< span><label class="control-label checkbox-inline"><input type="checkbox" /><strong>Choose All</strong></label>< /span>
</div>
</td>
</tr>
<tr>
<td><strong>Grand Total</strong></td>
<td><strong>:</strong></td>
<td>
< p><strong>N / A</strong>< /p>
</td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td class="text-center">
< p>
<button class="btn btn-primary" type="button">Submit</button>
< /p>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
This is the CSS used by either one
.libraryOrderForm {
padding:0 .5em;
background-color:#c8c7e9;
border:1px solid #000;
}
.libraryOrderForm .checkbox-inline {
margin-right:5px;
}
.libraryOrderForm .checkbox, .libraryOrderForm .radio {
margin-top:0;
}
This CSS is add for the table version
.maxWidthSelect {
width:300px;
}
.maxWidthCheckboxes {
width:330px;
white-space:normal;
}
Since you are looking to use a responsive style development tool, it would be better to rethink and develop without using a table so that you make it responsive. I would do things differently (somewhat) then what I even posted here.
Like I said above, there is still much to do to make it workable, all the form elements need to be properly configured so they will actually function correctly.
Saj
Awesome. Thank you very much, Mr. @saj. You produced exactly same. Let me check its responsiveness. Once again thank you it was a great help in order to understand the HTML coding.