Components

Buttons


Styles :
Sizes :
Colors :
Buttons Tags :

Inputs


Form controls :
Sizes :

Dropdowns


Directions :

Navigations


Progress Bars :


Default:
90%
Success:
90%
Danger:
90%
Warning:
90%
Info:
90%
Dark:
90%

Paginations :


Badges :


Primary Secondary Success Danger Warning Info Light Dark
Badge Pills :
Primary Secondary Success Danger Warning Info Light Dark

Alerts :


Tables


# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Striped rows :
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Bordred :
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Typography


<h1></h1> || .h1

h1. Bootstrap heading

<h2></h2> || .h2

h2. Bootstrap heading

<h3></h3> || .h3

h3. Bootstrap heading

<h4></h4> || .h4

h4. Bootstrap heading

<h5></h5> || .h5

h5. Bootstrap heading

<h6></h6> || .h6

h6. Bootstrap heading

Paragraph :

This is a simple paragraph example. It demonstrates how standard text is displayed on a webpage

BlockQuote :

The only limit to our realization of tomorrow is our doubts of today.

Franklin D. Roosevelt in Source Title

Ordered List :

  1. Wake up early in the morning
  2. Go for a short workout
  3. Prepare a healthy breakfast
    • Include some fruits
    • Add a protein source
    • Stay hydrated
  4. Start your work with focus
  5. Review tasks before ending the day

Unordered List :

  • Complete daily stand-up meeting
  • Check project updates
  • Collaborate with team members
    • Discuss blockers
    • Share progress
    • Plan next steps
  • Write documentation
  • Commit and push changes

Unstyled List :

  • Buy groceries
  • Pay utility bills
  • Plan weekend trip
    • Book tickets
    • Pack essentials
    • Check weather forecast
  • Clean the house
  • Read a book
Description lists :
Motivation

Staying motivated helps you achieve your goals with consistency and energy.

Discipline
Discipline allows you to stay focused and complete tasks effectively.
Consistency builds results
Small actions performed regularly create long-lasting impact and success.
Nesting
Nested example
A structured plan keeps both short-term and long-term goals aligned.

Muted Text :

This text is less emphasized and is often used for secondary information.

Primary Text :

This is primary text, usually used for important highlights or links.

Danger Text :

This text indicates danger or a critical warning message.

Warning Text :

This text is used to display caution or important notices.

Success Text :

This text shows success or a positive action confirmation.

Info Text :

This text provides additional helpful information to the user.