CSS library to develop responsive web applications

CDN

Copy and paste the following lines of code into the head tag of the website:

<link rel="stylesheet" href="http://datoweb.com/basecss/css/base.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://datoweb.com/basecss/js/base.js"></script>

Slider

	

Alerts

Lorem ipsum dolor sit amet. ×
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
	

Buttons

	

Notification

	

Tags

Gray Default Dark
Gray Default Dark
Gray Default Dark
	

Columns

25%

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

25%

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

50%

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	

Floats

Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	

Text Align

Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Center

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Justify

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	

Form

	

Log in

	

Sign in

	

Modal

Navbar

Navbar Dark

Panel

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	

Accordion

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Panel 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Panel 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	

Progress

12.5%
25%
50%
75%
100%
	

Section

Your section

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	

List

  • Lorem ipsum dolor sit.
  • Lorem ipsum dolor sit.
  • Lorem ipsum dolor sit.
  • Your Link
	

Pagination

	

Go Up

	

Display

These property are available:

  • d-block - set display block on element
  • d-none - set display none on element
  • d-inline - set display inline on element
  • d-inline-b - set display inline-block on element

Spacing

These property are available:

  • m - for classes that set margin
  • p - for classes that set padding

These sides are available:

  • t - margin-top or padding-top
  • b - margin-bottom or padding-bottom
  • l - margin-left or padding-left
  • r - margin-right or padding-right
  • x - both *-left and *-right
  • y - both *-top and *-bottom

These sizes are available:

  • 0 - margin or padding by setting it to 0
  • 1 - margin or padding to .25rem
  • 2 - margin or padding to .50rem
  • 3 - margin or padding to .75rem
  • 4 - margin or padding to 1rem
  • 5 - margin or padding to 1.25rem