Colors

Can be changed in sass/_variables.sass.
Find colors.

#555
main-text
#1c758a
blue
#ad3434
vine
#94424f
vine-dark
#b77033
brown
#437a39
green
#644172
violet
#218270
sea-wave
#f7f7f7
grey
#ccc
grey-border

Fonts

Can be changed in sass/_variables.sass.
Mixin font-main.

'Montserrat', sans-serif. Font-weight: 400
'Montserrat', sans-serif. Font-weight: 700

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, architecto.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, architecto.

Text Colors and Variants

Colors can be changed in sass/_variables.sass. Find colors there.
Add class to element and it will look like in example.

Custom colors

.main-text

.blue

.vine

.vine-dark

.brown

.green

.violet

.sea-wave

.grey

.grey-border

Bootstrap colors

.text-muted

.text-primary

.text-success

.text-info

.text-warning

.text-danger

Bootstrap variants

.text-lowercase

.text-uppercase

.text-capitalize

.font-weight-normal

.font-weight-bold

.font-italic

Text Alignment

Alignment:
.text-...-left
.text-...-center
.text-...-right

Sizes:
.text-lg-... - large screens and up.
.text-md-... - medium screens and up.
.text-sm-... - small screens and up.
.text-xs-... - extra-small screens and up.

* Look grid system to know what screen sizes are lg, md, sm, xs.

.text-xs-center

.text-xs-right

Also you can combine. For example this text will be aligned:
  • to center in phone;
  • to right in tablet;
  • and to left in desktop.

.text-xs-center .text-md-right .text-lg-left

Inline elements

Use tag to make text look like in example.

HTML Tag (Tags) Text
mark marked
del, s deleted
u, ins underlined
small small
b, strong bold
i, em italic
sup TextSup
sub TextSub
abbr (abbreviation) HTML
kbd (keybord input) cmd
q Short inline quotation
code Computer code
samp Computer output
var (variable) x

Preformatted Text

To get preformatted text use &lt; instead < and &gt; instead > inside pre tag.
Example: 

						<h2>Heading/h2>
						<p>Sample text here...</p>

Lists

Unordered
  • Text
  • Text
  • Text
    • Text
    • Text
      • Text
      • Text
    • Text
  • Text
Ordered
  1. Text
  2. Text
  3. Text
    1. Text
    2. Text
      1. Text
      2. Text
    3. Text
  4. Text
Unstyled .list-unstyled
  • Text
  • Text
  • Text
    • Text
    • Text
      • Text
      • Text
    • Text
  • Text
Definition
Javascript.
Program language.
Termin.
Definition.
Termin.
Definition.

Animations

Can be changed in sass/_variables.sass.
Mixin transition-main.
Default value 0.2s.
Add class transition-main to element with transition. Or add mixin transition-main in sass files.

Blockquote

.blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit. Ad fugiat autem saepe atque odio quae eveniet laudantium ipsum, commodi numquam illo non exercitationem nulla accusamus labore, iure eos minus dicta.

.blockquote and .blockquote-footer

Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit. Ad fugiat autem saepe atque odio quae eveniet laudantium ipsum, commodi numquam illo non exercitationem nulla accusamus labore, iure eos minus dicta.

Someone famous in Source Title

.blockquote-reverse

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

.blockquote-reverse and .blockquote-footer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Time

Use datetime attribute to set date. More info: W3Scholls HTML Time Tag.

Line - hr

Images

Responsive image, max-width: 100%.

.img-fluid

Image shapes

.img-rounded

.img-circle

.img-thumbnail

Image centered

.center-block

Image full width

.img-full-width

Forms

Use .form-control.

We'll never share your name with anyone else.
Radio
Controls sizing

Controls states
Custom controls

HTML5 Input Types that are NOT compatible with actual browsers and platforms. Information on

Input Types Color, Number, Date, Month, Datetime, Datetime-Local are NOT compatible with actual browsers. Use some jQuery plugins instead.
You can check compability at caniuse.com

Bootstrap 4 Forms Documentation

Icons

I recommend to use Font Awesome. It is iconic font. Icons colors and sizes are easy to change.

Carousel

I recommend to use Owl Carousel.

Buttons

Regular buttons
Outline buttons
Sizes
Other

Tables

Basic
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Inverse
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Striped
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Bordered
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter
Hoverable
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bootstrap Tables Docs

Address

Company Name
1234 Main St.
Anywhere, 101010, CA
U.S.A
+1.888.123.4567

Headings group

Heading 1

Heading 2

Grid

structure .container > .row > column(s)

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
.col-md-7
.col-md-5
.col-md-8
.col-md-4
Different columns in phone, tablet, desktop, large desktop.

Use .col-xs-.. .col-sm-.. .col-md-.. .col-lg-.. .col-xl-.. classes.

Read more in Bootstrap Grid System

Navigation

Read more in Bootstrap Navbar.

Breadcrumbs

  1. Home
  2. Library
  3. Data

Pagination

Read more in Bootstrap Pagination.

Tabs

Tab Content 1

Tab Content 2

Tab Content 3

Tab Content 4

More info in Bootstrap Navs.

Accordion (Collapse)

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

More info in Bootstrap Collapse .

Alerts

More info in Bootstrap Alerts .

Dropdowns

Action Another action Something else here

More info in Bootstrap Dropdowns .

Card

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

Card title

Support card subtitle
Card image

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
2 days ago
Card image

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Special title treatment

With supporting text below as a natural lead-in to additional content.

Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

More info in Bootstrap Cards .

Modal

More info in Bootstrap Modal .

Responsive utilities

You can show elements in desktop but hide in tablet or phone.

More info in Bootstrap Responsive utilities .

Responsive video

21by9

16by9

4by3

1by1

More info in Bootstrap Utilities .

Usefull resources

Grid, typography, components and javascript features: Bootstrap 4 Documentation.

HTML Tags: W3Scholls HTML Reference.