Here are some elements that can be used for post or page purposes.


<div class='image-article'>
<img class='card-img-top' alt='#' src='#' type='image/webp'/>
</div>

h2. Bootstrap Typography

h1. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet.

Syntax Highlighter

Codebox syntax powered by

highlightjs


<!--[ Default ]-->
<div class='PreC'>
<pre>code Here...</pre>
</div>

<!--[ HTML ]-->
<div class='PreC html'>
<pre>code Here...</pre>
</div>

<!--[ CSS ]-->
<div class='PreC css'>
<pre>code Here...</pre>
</div>

<!--[ Javascript ]-->
<div class='PreC js'>
<pre>code Here...</pre>
</div>

Table Content

#	First	Last	Handle
1	Mark	Otto	@mdo


<div class="table-responsive">
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </tbody>
</table>
</div>

Blockquotes

A well-known quote, contained in a blockquote element.

--Someone famous in Source Title

Alert custom


<div class="alert alert-primary" role="alert">Lorem ipsum...</div>
<div class="alert alert-secondary" role="alert">Lorem ipsum...</div>
<div class="alert alert-success" role="alert">Lorem ipsum...</div>
<div class="alert alert-danger" role="alert">Lorem ipsum...</div>
<div class="alert alert-warning" role="alert">Lorem ipsum...</div>
<div class="alert alert-info" role="alert">Lorem ipsum...</div>
<div class="alert alert-light" role="alert">Lorem ipsum...</div>
<div class="alert alert-dark" role="alert">Lorem ipsum...</div>

Lorem ipsum...

Custom Button


<a class="btn" href="#" target="_blank">Default</a>
<a class="btn preview" href="#" target="_blank">Preview</a>
<a class="btn download" href="#" target="_blank">Download</a>
<a class="btn link" href="#" target="_blank">Link</a>
<a class="btn cart" href="#" target="_blank">Shop cart</a>
<a class="btn share" href="#" target="_blank">Share</a>
<a class="btn info" href="#" target="_blank">More info</a>

Default Preview Download Link Shop cart More info

Player Video and Audio

Video and audio players are built using plugins from plyr io

Audio


<!--[ Audio Player ]-->
<div class='PlayerItm'>
<audio class='PlayerC' controls>
  <source src='url_audio.mp3' type='audio/mp3'>
</audio>
</div>

Video


<!--[ Video Player ]-->
<div class='PlayerItm'>
<video preload='metadata' class='PlayerC' controls playsinline crossorigin='anonymous'>
  <source src='url_video.mp4' type='video/mp4'>
  <track kind='captions' label='English' src='caption_en.vtt' srclang='en' default />
</video>
</div>

Youtube


<!--[ YouTube Player ]-->
<div class='PlayerItm'>
  <div class='PlayerC' data-plyr-embed-id='video_ID_YouTube' data-plyr-provider='youtube'></div>
</div>

Documentasi theme datakodehiru