Shiori uses Bootstrap for styling. Here’s how fundamental HTML elements are displayed on Shiori. To learn more, check out Bootstrap’s documentation.


Do not use h1 tags, which is reserved for the post title. Use h2 tags mostly, and use h3 if you need subheadings.


This is a regular paragraph. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Links look like this. Emphasis. Marked. Deleted. Code. user-input.


This is a blockquote. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.


  • Unordered List
  • Unordered List
  • Unordered List
  1. Ordered List
  2. Ordered List
  3. Ordered List


In Shiori, you don’t need to add the Bootstrap .table class to table. It just works.

First Name Last Name Username
Elle Kasai @ellekasai


def print_hi(name)
  puts "Hi, #{name}"
#=> prints 'Hi, Elle' to STDOUT.


Images have round corners and are responsive by default.

That’s it!

Continue onto Shiori by Example: Helpful Bootstrap Components to learn more.