Quick start

Bootlaterus is based on Bootstrap v4 and doesn't require additional JS scripts, so it is fully compatible with technologies like ReactJS, Angular, VueJS or jQuery (and many others). Bootlaterus is friendly for any Bootstrap developer!

Easy way All-CDN

This path is compatible with jQuery implementations. If you want to use Bootlaterus with another JS framework/library, you'll want to see following sections.

Add Bootlaterus copying this tag into your html header.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootlaterus@latest/dist/css/bootlaterus-cfonts.min.css" crossorigin="anonymous">

Include additional javascript libraries (JS, Popper, and jQuery):

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Only styles with CDN

This path is compatible with almost any JS framework, you can include the CSS styles on your web-app and use everything else with your normal framework workflow (usually NPM).

Add Bootlaterus copying this tag into your html header.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootlaterus@latest/dist/css/bootlaterus-cfonts.min.css" crossorigin="anonymous">

As you can see in this sample ReactJS project, you'll just need to include the styles under your index.html

Full NPM

This path can give you more flexibity, but you may need to import the styles or modify your project configuration. You can install bootlaterus using NPM:

npm install bootlaterus --save

Themes

Bootlaterus includes out-of-the-box different theme variations.

Default theme

Optimized for general use.

• Including custom fonts:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootlaterus@latest/dist/css/bootlaterus-cfonts.min.css" crossorigin="anonymous">

• Without custom fonts:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootlaterus@latest/dist/css/bootlaterus.min.css" crossorigin="anonymous">

Default Bootstrap

Use a default Bootstrap Theme plus all Bootlaterus extended components:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootlaterus@latest/dist/css/bootlaterus-default-bootstrap.min.css" crossorigin="anonymous">

Bootstrap-GS

A general use theme with colorful buttons. Inspired by Equilaterus GameStudios

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootlaterus@latest/dist/css/bootlaterus-gs.min.css" crossorigin="anonymous">

Docs

Theme optimized for wikis and documentation-repos.

• Bootlaterus variation with custom fonts:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootlaterus@latest/dist/css/bootlaterus-docs-cfonts.min.css" crossorigin="anonymous">

• Bootlaterus variation without custom fonts:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootlaterus@latest/dist/css/bootlaterus-docs.min.css" crossorigin="anonymous">

• Default Bootstrap style:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootlaterus@latest/dist/css/bootlaterus-docs-default-bootstrap.min.css" crossorigin="anonymous">

• GS style:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootlaterus@latest/dist/css/bootlaterus-docs-gs.min.css" crossorigin="anonymous">

Gradients

Bring your website to life by using this beautiful gradients available as color filters and backgrounds.

Linear gradients

Color filters

Use them to create color variations for your img tags.

<div class="cf cf-img cf-indigo-teal">
  <img src="IMAGE-URL" class="img-fluid position-relative" />
</div>

Compatible

Bootlaterus is cool.

Create awesome cards with embeeded images.

<div class="card h-100">
  <div class="embed-responsive embed-responsive-16by9">
    <div class="cf cf-indigo-teal">  
      <img src="IMAGE-URL"
          class="card-img embed-responsive-item" style="object-fit: cover;" />
    </div>
  </div>
  <div class="card-body">
    <h2 class="card-title">Card title</h5>
    <p class="card-text">Card text.</p>
  </div>
</div>

Background Color filters

Create awesome components combining divs that are versatile as they can include almost any element inside them.

<div class="background" style="background-image: url(IMAGE_URL);">
  <div class="bg-cf-indigo-teal min-vh-50">      
    <div class="hv-center text-white text-center text-shadow">
      <p class="h1 font-weight-lighter">Your Message Here!</p>
    </div>
  </div>
</div>

Available variations

Pink to blue

Green to Teal

Cyan to Blue

Red to Orange

Indigo to Teal

Green to Yellow

Radial gradients

They work exactly as linear gradients except that they do NOT have the .bg- variant that shows them as background color without transparency.

Radial Color Filters

Use them to create color variations for your img tags.

<div class="cf cf-img cf-radial-green">
  <img src="IMAGE-URL" class="img-fluid position-relative" />
</div>

Create nice effects with the transparent variation.

<div class="cf cf-img cf-radial-transparent">
  <img src="IMAGE-URL" class="img-fluid position-relative" />
</div>

Radial Background Color Filter

<div class="background" style="background-image: url(IMAGE-URL);">
  <div class="bg-cf-radial-teal min-vh-50">      
    <div class="hv-center text-white text-center text-shadow">
      <p class="h1 font-weight-lighter">YOUR MESSAGE!</p>
    </div>
  </div>
</div>

Available Variations

All variations available for both .bg-cf and .cf classes.

Additional colors

Bootlaterus has additional classes to add shadows and alpha-colors to your components:

All variations available for both .bg-cf and .cf classes.

Alpha colors

<div class="bg-dark-light-1 py-5">
  <p><strong>.bg-light-alpha-1</strong></p>
</div>
<div class="bg-light-alpha-2 py-5">
  <p><strong>.bg-light-alpha-2</strong></p>
</div>
<div class="bg-light-alpha-3 py-5">
  <p><strong>.bg-light-alpha-3</strong></p>
</div>

<div class="bg-dark-alpha-1 py-5">
  <p><strong>.bg-dark-alpha-1</strong></p>
</div>
<div class="bg-dark-alpha-2 py-5">
  <p><strong>.bg-dark-alpha-2</strong></p>
</div>
<div class="bg-dark-alpha-3 py-5">
  <p><strong>.bg-dark-alpha-3</strong></p>
</div>

Shadow colors

<div class="bg-shadow-1 py-5">
  <p><strong>.bg-shadow-1</strong></p>
</div>
<div class="bg-shadow-2 py-5">
  <p><strong>.bg-shadow-2</strong></p>
</div>
<div class="bg-shadow-3 py-5">
  <p><strong>.bg-shadow-3</strong></p>
</div>

<div class="bg-cf-pink-blue">
  <div class="bg-shadow-1 py-5">
    <p><strong>.bg-shadow-1</strong></p>
  </div>
  <div class="bg-shadow-2 py-5">
    <p><strong>.bg-shadow-2</strong></p>
  </div>
  <div class="bg-shadow-3 py-5">
    <p><strong>.bg-shadow-3</strong></p>
  </div>
</div>

Side Navbars

Built-in support for responsive Side Navbars, enables to rapidly prototype different layout styles.

Side navbar

• This is the main component, it always has the following classes: navbar navbar-side collapse.
• According to your desing you'll need to use navbar-side-left or navbar-side-right, defining a side for your navbar.
• You should define a breaking point to display or hide your navbar: navbar-side-{BREAKING-POINT}, where BREAKING-POINT is sm, md, lg, xl.
• It is recommended to wrap your navbar-brand inside a div with class navbar-brand-container, so you can add a background color to it.
• You must include a navbar-toggler to hide/show the menu.
• For SPAs (Single Page Applications) consider adding the attributes data-toggle="collapse" data-target=".navbar.show" to your links if you're using the jQuery default implementation, otherwise you'll need to add a code to handle navbar collapsing.

Sample Sidenavbar code

<nav class="navbar navbar-side navbar-side-left navbar-side-lg navbar-dark bg-dark-alpha-2 h-font collapse" id="sideNavbar">
  <div class="navbar-brand-container bg-dark-alpha-1">
    <a class="navbar-brand" href="#">
      <span>YOUR_TITLE</span>
    </a>
  </div>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sideNavbar" aria-controls="sideNavbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <ul class="navbar-nav">
    <li><a class="nav-link" href="#">Nowhere</a></li>
    <li><a class="nav-link" href="#">Another link</a></li>
    <li><a class="nav-link" href="#">Your link</a></li>
  </ul>
</nav>

Sample React implementation

This example shows how to implement custom handlers for a React implementation with React Router.

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
  const [collapsed, setCollapsed] = useState('collapse');
  const onCollapse = () => {
    setCollapsed(collapsed === '' ? 'collapse' : '')
  }
  const onHide = () => {
    setCollapsed('collapse');
  }
  return (
    <nav className={`navbar navbar-side navbar-side-left navbar-side-sm navbar-dark bg-dark-alpha-2 h-font ${collapsed}`}  id="sideNavbar">
      <div className="navbar-brand-container bg-dark-alpha-1">
        <Link onClick={onHide} className="navbar-brand" to="/">
          <span>Bootlaterus React</span>
        </Link>
      </div>
      <button className="navbar-toggler" type="button" onClick={onCollapse} aria-controls="sideNavbar" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
      </button>
      <ul className="navbar-nav">
        <li><Link onClick={onHide} className="nav-link" to="/ConditionEvaluators">Option 1</Link></li>
        <li><Link onClick={onHide} className="nav-link" to="/Decisions">Option 2</Link></li>
        <li><Link onClick={onHide} className="nav-link" to="/DecisionSets">Option 3</Link></li>
      </ul>
    </nav>
  )
}  
export default Header;

More info

• Use the class m-navbar-side-{SIDE}-{BREAK-POINT}, where SIDE is left or right and BREAKING-POINT is sm, md, lg, xl, to define a margin between your main content, while the side navbar is visible.
• Side navbars are fully compatible with Bootstrap color utilities and base navbars.

General page-structure

<body>
  <!-- Side navbar -->  
  <nav class="navbar navbar-side navbar-side-left navbar-side-lg collapse">...</nav>
    
  <!-- Your main content -->
  <div class="m-navbar-side-left-lg">
    <div class="container">
      ....
    </div>
  </div>
</body>

Extended Carousel

<!-- Extended Carousel -->
<!-- Works like any Bootstrap Carousel -->
<!-- Just add class to fix the aspect ratio (EX: carousel-16-10, carousel-16-9) -->
<div id="carouselExtended" class="carousel carousel-16-10 slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExtended" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExtended" data-slide-to="1"></li>
    <li data-target="#carouselExtended" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <!-- And use divs with background images and .carousel-content class -->
      <!-- instead of imgs. -->
      <div class="carousel-content"
            style="background-image: url(IMAGE_URL)">
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-content"
        style="background-image: url(IMAGE_URL)">
      </div>
    </div>
    <div class="carousel-item">
        <div class="carousel-content"
          style="background-image: url(IMAGE_URL)">
        </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExtended" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExtended" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Syntax HL

By default Bootlaterus supports Rouge and Prettify as Syntax Highlighters. First one comes by default with Github Pages and second one is really easy to use with any website.

Rouge Example

Rouge is supported by providing base color styles for pygments and outlinning overrides.

public class Foo 
{    
    public string Name { get; set; }

    private int _counter;

    public bool SomeMethod(string name)
    {
        if (name == Name)
            return true;
        
        // Do some advanced stuff with a meaningful comment
        // Note that code is separated by an extra line from upper condition.
        foreach (var character in name)
        {
            if (character == 'X')
                continue;

            // Do more stuff
            ...
            ...
            ...
        }
        return ...;
    }
}

Prettify Example

Bootlaterus overrides Prettify borders and layout styles that are out of Bootlaterus style guides. Syntax colors are not modified.

public class Foo 
{    
    public string Name { get; set; }

    private int _counter;

    public bool SomeMethod(string name)
    {
        if (name == Name)
            return true;
        
        // Do some advanced stuff with a meaningful comment
        // Note that code is separated by an extra line from upper condition.
        foreach (var character in name)
        {
            if (character == 'X')
                continue;

            // Do more stuff
            ...
            ...
            ...
        }
        return ...;
    }
}

Misc

Use Bootlaterus Utilities and you will be able to create a unique UI writting less CSS than ever.

Aspect Ratio Utilities

<div class="bg-cf-pink-blue ar-4-3"></div>
<div class="bg-cf-pink-blue ar-16-10"></div>

Positioning utils

<div class="bg-pink-blue ar-4-3 text-white text-shadow position-relative">
  <p class="hv-center">I'm centered!</p>  
  <p class="to-bottom to-right position-absolute">Bottom Right!</p>
</div>

Sizing utils

<div class="bg-cf-green-teal text-white text-shadow min-vh-25">
    <p class="p-3">I'm at least 25% of you viewport</p>
  </div>

Backgrounds

Add a beautiful background to your website.

• .background: adding this class to any div that will contain a background-image will set-up basics to get a good look'n'feel within Bootlaterus themes.
• .background .background-fixed: this combination will create a background with background image as a fixed attachment.
• .background .background-fixed-full: this one will create a full-screen background with fixed position. For example, the Eiffel Tower image that appears at the top and the bottom of this docs is using this configuration.

Note: Fixed backgrounds may look like a normal background due to performance prioritization for mobile web browsers.

<div class="background min-vh-50" style="background-image: url(IMAGE_URL);">
  <p class="hv-center h-font h3-font-size text-shadow text-white">.background</p>  
</div>

<div class="background background-fixed min-vh-50" style="background-image: url(IMAGE_URL);">
  <p class="hv-center h-font h3-font-size text-shadow text-white">.background .background-fixed</p>  
</div>

Fonts

Utilities to customize the fonts used on your components.

.h-border-bottom

<p class="h-border-bottom">I'm a <i>p</i></p>
<span class="h-border-bottom">I'm a <i>span</i></span>
<h4 class="h-border-bottom">I'm an <i>h4</i></h4>

.h{#}-font-size

<p class="h1-font-size">h1 size</p>
<p class="h2-font-size">h2 size</p>
<p class="h3-font-size">h3 size</p>
<p class="h4-font-size">h4 size</p>
<p class="h5-font-size">h5 size</p>
<p class="h6-font-size">h6 size</p>

.text-small

<p>Normal text.</p>
<p class="text-small">Text small.</p>
<div class="text-small-contents">
  <p>Everything inside this div will be text-small</p>
  <span>Everything inside this div will be text-small</span>
  <h1>Even a h1</h1>
</div>

.text-shadow

<p class="text-shadow">Look me!</p>
<div class="bg-blue text-white">
  <p class="text-shadow">Look me!</p>
</div>

.font-weight-lighter

<p class="font-weight-lighter">Im lighter!</p>

Interactables

Cards and other UI components are easier to implement as interactive elements.

• .interactable class will add hover shadows and transitions.
• .hover-animate-cf will animate color filter gradients (.cf .cf-{GRADIENT}).
• We still recommend:
  • When cards have a button-link: Use Stretched Link
  • When link is for the full card: Use Text-reset

<div class="card h-100 interactable hover-animate-cf">
  <a class="text-reset text-decoration-none d-flex flex-column h-100" href="#">
    <div class="embed-responsive embed-responsive-16by9">
      <div class="cf cf-red-orange">
        <img src="YOUR-IMAGE" class="card-img embed-responsive-item" style="object-fit: cover;" />
      </div>
    </div>
    <div class="card-body d-flex flex-column">
      <p class="card-title h5">Multiple themes</p>
      <p class="card-text">Bootlaterus includes different theme variations.</p>  
      <p class="card-text mt-auto"><small class="text-muted">See more...</small></p>
    </div>
  </a>
</div>

Multiple themes

Bootlaterus includes different theme variations.

See more...

Shadows

<div class="bg-cf-pink-blue shadow min-vh-25 text-white">
  <p class="hv-center h-font h2-font-size">I have a shadow</p>
</div>

Dark dropdowns

Add the class .dropdown-dark to a dropdown and it will become dark. Compatible with navbar dropdowns.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Normal dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="dropdown dropdown-dark">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Normal dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

FAQ

How to build this package from the source code?

See instructions in our repo.

Where is the version change log?

See here.

Do you have sample projects?

Yes, but only for ReactJS. Currently we don't have plans to add more sample repos, but as Bootlaterus does not require additional JS to work, you should be OK to use it with anything else.

How to customize the fonts?

• Create your own CSS file.
• Add the following snippet:

  @import url('https://fonts.googleapis.com/css?family=Prompt');
  
  :root {
    --font-family-sans-serif: "Prompt", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    --font-family-headings: "Prompt", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    --font-family-monospace: "Consolas", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; 
  }
  
  body {
      font-family: var(--font-family-sans-serif);
  }
  
  .navbar, h1, h2, h3, h4, h5, h6, .h-font {
    font-family: var(--font-family-headings);
    font-weight: bold;
    text-transform: uppercase;
  }
  
  pre {
    font-family: var(--font-family-monospace);
  }

• Customize with your own fonts and styles (Note: for font families replace "Prompt" and "Consolas" and left fallback fonts).
• Include the CSS file in your website.