Bootstrap Shortcuts – The Easy Way

Image of coding
Bootstrap Code

Introduction

  • In Mid 2010 It was created at twitter
  • Twitter released It as open source project In August 2011.
  • First major released of It’s version 2 In January 2012
  • The most starred git hub development project In February 2012
  • 3rd version of this was created In August 2013
  • 4th version of this was created In August 2017.

What Is Bootstrap ?

It is a free front-end framework for faster and easier web development. It includes HTML and CSS based design templates for typography, forms, button tables, navigation, image carousels and many other, as well as optional JavaScript plugins. Bootstrap also give for the ability to easily create responsive design.

Where To Get Bootstrap ?

What Is Grid Bootstrap ?

It has 12 columns

Left column 6 and Right column 6 .

Break Points

  • Large screens (wide screen desktops)
  • Medium screens (Older source desktops)
  • Small screens (tablets)
  • Extra small screens (phones)

Typography

Heading Example

<h1></h1> h1. 1st heading

<h2></h2> h2. 2nd Heading

<h3></h3> h3. 3rd heading

<h4></h4> h4. 4th heading

<h5></h5> h5. 5th heading

<h6></h6> h6. 6th heading

Buttons Tables

<button type = “button” class = “btn btn – primary”>primary</button>

<button type = “button” class = “btn btn – secondary”>secondary</button>

<button type = “button” class = “btn btn – success”>success</button>

<button type = “button” class = “btn btn – danger”>danger</button>

<button type = “button” class = “btn btn – warning”>warning</button>

<button type = “button” class = “btn btn – into”>into</button>

<button type = “button” class = “btn btn – light”>light</button>

<button type = “button” class = “btn btn – dark”>dark</button>

<button type = “button” class = “btn btn – link”>link</button>

Advantages

  • ● Responsive Grid
  • ●Pre – made html components
  • ●Cross – browser compatibility
  • ●Easy to use
  • ●Active development
  • ●Flexible
  • ●Community

We will be happy to hear your thoughts

Leave a reply

Edusera
Logo
Open chat
1
Scan the code
Hello!👋
Can we help you?