King's Online Single-platform Bootstrap Builder (KO-BB)
Select the component you wish to build:
Academic note
Preview
Code
<div class="academic-note-container">
<div class="academic-note-card">
<div class="card-body">
<div class="card-text">
<p>Pudding pie bonbon muffin carrot cake fruitcake macaroon. Cupcake dessert topping. Brownie cheesecake sweet jujubes. Liquorice dragée pie cookie. Soufflé lemon drops biscuit dragée biscuit macaroon cake halvah. Bonbon marzipan oat cake danish cupcake brownie chocolate bar.</p>
</div>
</div>
</div>
</div>
CTEL have temporarily reverted the KMS embed code to the iframe option whilst we wait for a few Kaltura issues to be resolved. Please note that this code may change and this component may become unavailable for a short period of time. Updates to follow.
Preview
Code
<div class="audio-container">
<div class="audio-top">
<div class="audio-image-container">
<img class="audio-image" src="https://via.placeholder.com/150">
</div>
<div class="audio-info">
<p class="audio-speaker">Professor Place Holder</p>
<h3 class="audio-title">Audio title</h3>
</div>
</div>
<div class="embed-responsive embed-responsive-audio">
</div>
</div>
Blockquote
Preview
Code
<figure class="blockquote">
<blockquote class="quote-body">
This is the preview area where you can see what your blockquote will look like.
</blockquote>
<figcaption class="quote-attribution">And the attribution goes here (2021)</figcaption>
</figure>
Preview
Code
Carousel
Please add alternative text for all images.
Preview
Code
<div class="new-carousel landscape-carousel w-100" tabindex="0" role="region" aria-label="gallery">
<ul class="nc-gallery">
</ul>
<ul class="nc-buttons" aria-label="gallery controls">
<li>
<button class="nc-previous btn btn-primary" disabled="">Previous</button>
</li>
<li class="indic-container">
<ul class="indic-dots" aria-hidden="true">
<li class="active"></li>
</ul>
</li>
<li>
<button class="nc-next btn btn-primary">Next</button>
</li>
</ul>
</div>
Collapse
Preview
Code
<div class="collapse-container">
</div>
Download file
Preview
Code
<div class="download-container">
<a class="btn btn-primary btn-download" href="www.example.com/file.pdf" download>Download file</a>
<p class="download-info">PDF, 86KB</p>
</div>
Float box
Preview
Code
Info Box
Preview
Code
<div class="alert alert-instructional" aria-label="alert">
<div>
<p><span role="text"><span class="sr-only">Note:</span>Info box body text</span></p>
</div>
</div>
It is not yet possible to edit content within the Builder for this component. Copy and paste the code into Keats in order to add content.
Preview
Code
<div class="table-scroll">
<table class="table table-bordered">
<thead>
<tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
Timeline
Please add alternative text for all images.
Preview
Code
<div class="timeline-container timeline-2021-container">
</div>
Transcript
Preview
Code
<div class="transcript-container collapsed">
<div class="transcript-button-group">
<button class="btn btn-primary view-close-transcript" aria-expanded="false">View transcript</button>
</div>
<div class="transcript-card">
<div class="card-body">
<p>Transcript body...</p>
</div>
</div>
</div>
CTEL have temporarily reverted the KMS embed code to the iframe option whilst we wait for a few Kaltura issues to be resolved. Please note that this code may change and this component may become unavailable for a short period of time. Updates to follow.
Preview
Code
<div class="embed-responsive embed-responsive-400by285">
</div>
View/hide
Preview
Code
<div class="view-answer-container collapsed">
<h5>Lemon drops gingerbread topping?</h5>
<button class="btn btn-primary view-hide-answer" aria-expanded="false">View answer</button>
<div class="view-answer-card">
<div class="card-body">
<div class="card-text">
<p>Pudding pie bonbon muffin carrot cake fruitcake macaroon. Cupcake dessert topping. Brownie cheesecake sweet jujubes. Liquorice dragée pie cookie. Soufflé lemon drops biscuit dragée biscuit macaroon cake halvah. Bonbon marzipan oat cake danish cupcake brownie chocolate bar.</p>
</div>
</div>
</div>
</div>
FAQs
The KO-BB is a simple tool that uses visual selectors to generate frontend code for Bootstrap components and is designed for use with the King's Online Design System. The Design System in turn, is compatible with Grid or Collapsed Topics format modules on Moodle 3.X installations (commonly known as KEATS within KCL).
More information on how to set up the Design System can be accessed here.
If something isn't working as expected, submit a bug report.
The King's Online Design System Guide demonstrates all of the different components that can be built. This also contains examples of commonly used default pages and some of the different types of activities available.
View the Release plan and changelog for a breakdown of what's currently live and what's in store for future releases.
Books currently need additional code added in order to make them printer-friendly. Simply add this code to the top of the first page of the book:
<script type="text/javascript">
// Load external CSS file into Keats
loadcss("https://git.iddkingsonline.com/designsystem/css/print-book.css");
function loadcss(url) {
var head = document.getElementsByTagName('head')[0],
link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
head.appendChild(link);
return link;
}
// Load external JS file into Keats
loadjs("https://git.iddkingsonline.com/designsystem/js/book.js");
function loadjs(url) {
var body = document.getElementsByTagName('body')[0],
script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
body.appendChild(script);
return script;
}
</script>You can find a list of commonly used custom classes below:
Grid layout
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. More information can be found on their documentation page.