Introduction to Bootstrap | Build Your Own Static Website | Cheat Sheet

-

 

1. Reusability of CSS Rulesets

 If we want the same style for multiple HTML elements, we can write the CSS Ruleset once and use it for different HTML elements.

CSS Code:-

.button {
  width: 138px;
  height: 36px;
  border-width: 0px;
  border-radius: 10px;
}

HTML Code:-

<button class="button">Get Started</button>
<button class="button">Visit Now</button> 

2. Multiple class names as an HTML attribute value

We can provide multiple class names separated by space as a value to the HTML class attribute.

Syntax: <tag class = "name1 name2 name3 name4 ...">Content</tag>

HTML attribute value: name1 name2 name3 name4 ...

class names: name1 , name2 , name3 , and name4

 CSS Code:-

.button {
  width: 138px;
  height: 36px;
  border-width: 0px;
  border-radius: 10px;
}
.button-green {
  background-color: #8cc63f;
}

HTML Code:-

<button class="button button-green">Get Started</button>

Example:-

HTML Code:-

 <!DOCTYPE html>
<html>
  <head></head>
  <body>
    <button class="button button-green">Get Started</button>
    <button class="button button-orange">Visit Now</button>
  </body>
</html>

  CSS Code:-

.button-green {
  background-color: #8cc63f;
}
.button-orange {
  background-color: #f7931e;
}
.button {
  width: 138px;
  height: 36px;
  border-width: 0px;
  border-radius: 10px;
}


 

3. Bootstrap

Bootstrap is a large collection of predefined reusable Code Snippets written in HTML, CSS, and Javascript. The Code Snippets include Buttons, Cards, Carousels, etc.

3.1 How to use Bootstrap?

To use the Code Snippets provided by Bootstrap, we need to add the below piece of code within the HTML head element. We call it BootstrapCDN.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

3.2 Predefined Styles in Bootstrap

3.2.1 Button

The Bootstrap class name btn is used to style the HTML button element.

<button class="btn">Submit</button>

To achieve the different button styles, Bootstrap has the following class names.

Example:-

HTML Code:-


<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </head>
  <body>
    <button class="btn btn-primary">Get Started</button>
    <button class="btn btn-secondary">Get Started</button>
    <button class="btn btn-success">Get Started</button>
    <button class="btn btn-danger">Get Started</button>
    <button class="btn btn-warning">Get Started</button>
    <button class="btn btn-info">Get Started</button>
    <button class="btn btn-light">Get Started</button>
    <button class="btn btn-dark">Get Started</button>
  </body>
</html>

Output:- 


 

Bootstrap provides us with different types of buttons. One of them is outline buttons, which don't have a background color.

To add the outline buttons in our HTML document, just replace btn in the above class names with the btn-outline .

To achieve the different outline button styles, Bootstrap has the following class names:

Example:-

HTML Code:-

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </head>
  <body>
    <button class="btn btn-outline-primary">Get Started</button>
    <button class="btn btn-outline-secondary">Get Started</button>
    <button class="btn btn-outline-success">Get Started</button>
    <button class="btn btn-outline-danger">Get Started</button>
    <button class="btn btn-outline-warning">Get Started</button>
    <button class="btn btn-outline-info">Get Started</button>
    <button class="btn btn-outline-light">Get Started</button>
    <button class="btn btn-outline-dark">Get Started</button>
  </body>
</html> 

Output:-

 

Note:-

By default, Bootstrap class name  btn has no background color.

3.2.2 Text colors

To apply different colors to the text, Bootstrap has the following class names:

Example:-

HTML Code:-

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </head>
  <body>
    <p class="text-primary">Tourism</p>
    <p class="text-secondary">Tourism</p>
    <p class="text-success">Tourism</p>
    <p class="text-danger">Tourism</p>
    <p class="text-warning">Tourism</p>
    <p class="text-info">Tourism</p>
    <p class="text-light">Tourism</p>
    <p class="text-dark">Tourism</p>
  </body>
</html> 

Output:-


 

3.2.3 Text transform

To apply different cases like upper case, lower case, etc. to the text, Bootstrap has the following class names:

Example:-

HTML Code:-

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </head>
  <body>
    <p class="text-uppercase">Plan your TRIP.</p>
    <p class="text-capitalize">plan your trip.</p>
    <p class="text-lowercase">PLAN your TRIP.</p>
  </body>
</html>

Output:- 


 

3.2.4 Background colors

To apply different background colors to an HTML element, Bootstrap has the following class names:

Example:-

HTML Code:-

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="bg-primary"><p>Tourism</p></div>
    <div class="bg-secondary"><p>Tourism</p></div>
    <div class="bg-success"><p>Tourism</p></div>
    <div class="bg-danger"><p>Tourism</p></div>
    <div class="bg-warning"><p>Tourism</p></div>
    <div class="bg-info"><p>Tourism</p></div>
    <div class="bg-light"><p>Tourism</p></div>
    <div class="bg-dark"><p>Tourism</p></div>
  </body>
</html>

Output:-

 



 

Bootstrap provides us with many predefined class names. Some of them are:

  • card
  • carousel
  • alert
  • alert-success
  • alert-link
  • bg-danger
  • card-body and many more...

 

Warning:-

Using predefined bootstrap class names as a selector in our CSS Ruleset may give unexpected results.





 

Example:-

HTML Code:-

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="bg-warning text-center">
      <h1 class="text-primary">Tourism</h1>
      <p class="text-lowercase">PLAN your TRIP.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </body>
</html>

Output:-



Comments

Post a Comment

Popular posts from this blog

Introduction to CSS Box Model | Part 1 | Build Your Own Static Website | Cheat Sheet

-
Image
  CSS Box Properties 1. Height The CSS height property specifies the height of an HTML element. .card {   height: 200px; } 2. Width The CSS width property specifies the width of an HTML element. .card {   width: 250px; } CSS Background Properties 1. Background Image The CSS background-image property specifies the background image of an HTML element.  .card {   background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/ocean.jpg"); } Warning:-  1. The background image takes the height of the content of an HTML element if you don't specify the height to  it. 2. The URL given to the background-image must be a valid URL to display the image.   2. Background Size The CSS background-size property specifies the size of the background image of an HTML element. .card {   background-size: cover; } Note:- Aspect Ratio is the ratio of the width and height (width/height) of an image. Example:- HTML Code:- <!DOCTYPE html...
Read more