KO Single-platform Bootstrap Builder

Select the component you wish to build:

Options

Complete the following fields:

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>

Options

Complete the following fields:

Copy and paste the embed code into the textarea.

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>

Options

Complete the following fields:

Preview

Code

<figure class="quote-box">
  <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>
            

Options

Complete the following fields:

Preview

Code





          

Options

Complete the following fields:

Preview

Code

<div class="collapse-container">
  
</div>

Download file

Options

Complete the following fields:

The file must first be uploaded to Keats, where the generated link can be copied and pasted from.

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>

Options

Complete the following fields:

Preview

Code

Options

Select your options:

Preview

Code

<div class="definition-box">
  <div>
    <h5><span role="text"><span class="sr-only">Definition:</span>Info box title</h5>
    <p>Info box body text</p>
  </div>
</div>
            

Options

Complete the following fields:

Add custom classes separated by a space

Preview

Code

<ul>
</ul>

Options

Select your options:

No. of
Select 'middle' for tables with merged cells only.

Preview

Code

<div class="table-scroll">
  <table class="table table-bordered">
    <thead>
      <tr>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>
            

Options

Complete the following fields:

Preview

Code

<div class="timeline-container timeline-2021-container">

</div>

Options

Complete the following fields:

Copy and paste the body of the transcript text into the textarea.

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>

Options

Complete the following fields:

Copy and paste the embed code into the textarea.

Preview

Code

<div class="embed-responsive embed-responsive-400by285">
  
</div>

Options

Complete the following fields:

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