Iam designing web pages.So,I want to know how bootstrap is useful to my website?
What is bootstrap exactly?How to use it?Why Bootstrap?What is the main purpose of Bootstrap?How it will help to design web pages?what is Bootstrap in Programming?Bootstrap CDN?How does it work?
deeksha
Bootstrap is a large collection of predefined reusable Code Snippets written in HTML, CSS, and Javascript. The Code Snippets include Buttons, Cards, Carousels, etc.
How to use Bootstrap?
To use the Code Snippets provided by Bootstrap, we need to add 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.jsarunraj503.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>
****************************************************************************
Add the above lines in your HTML head tag. so,that you can use bootstrap predefined styles which will decrease our burden.
Predefined Styles in Bootstrap:
1.Button
The Bootstrap class name btn is used to style the HTML button element.
Ex: <button class=”btn”>Submit</button>
To achieve the different background colors for button, Bootstrap has the following class names.
<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>
Bootstrap provides us with different types of buttons. One of them is outline buttons, which don’t have a background color.
<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>
Note: By default, Bootstrap class name btn has no background color.
Text colors: To apply different colors to the text, Bootstrap has the following class names.
<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>
Text transform: To apply different cases like upper case, lower case, etc. to the text, Bootstrap has the following class names:
<p class=”text-uppercase”>Plan your TRIP.</p>
<p class=”text-capitalize”>plan your trip.</p>
<p class=”text-lowercase”>PLAN your TRIP.</p>
Background colors: To apply different background colors to an HTML element, Bootstrap has the following class names:
<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>
Bootstrap provides us with many predefined class names. Some of them are:
Warning: Using predefined bootstrap class names as a selector in our CSS Ruleset may give unexpected results.
Flexbox Properties
1. Flexbox Container
The Bootstrap class name d-flex defines a Flexbox Container. The direct HTML elements in the Flexbox Container are called flex items.
<div class=”d-flex”>
<div>
<h1>Tourism</h1>
<p>Plan your trip.</p>
<button>Get Started</button>
</div>
</div>
Note: Wrapping HTML elements in the Flexbox Container is mandatory to apply other flex properties.
Flex Direction
The Flex Direction specifies the direction of the flex items in the Flexbox Container.
flex-row
The Bootstrap class name flex-row is used to move the flex items horizontally in the Flexbox Container.
<div class=”d-flex flex-column”>
<div>
<h1>Tourism</h1>
<p>Plan your trip.</p>
<button>Get Started</button>
</div>
</div>
flex-column
The Bootstrap class name flex-column is used to move the flex items vertically in the Flexbox Container.
Note: The Bootstrap class name flex-row is the default Flex Direction for the Flexbox Container. So, once d-flex is specified, all the flex items in the Flexbox Container display horizontally.
Justify Content
The Justify Content specifies the alignment of flex items along the Flex Direction in a Flexbox Container.
justify-content-start
The Bootstrap class name
justify-content-start
is used to align the flex items at the start of the Flexbox Container either horizontally or vertically based on the Flex Direction.