Skip to content

devendra1707/bootstrap5

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
README.md
README.md
 
 
notes.pdf
notes.pdf
 
 

Repository files navigation

bootstrap5qaj5gyi

Bootstrap 5

  • HTML - DOM

  • CSS - Sass or Less

  • Bootstrap

                                      Bootstrap

  • It is an open source and cross platform library for building effective, responsive UI faster.

  • Library provides a) Utilities b) Components

  • Utilities are used for changing the appearence of any element font, style, color, position, display, margin, padding etc..

  • Components are rich in UI, styles and Logic. Cars, Buttons, Forms, Accordion, Alerts, Modals, Navbar etc...

Alternatives: TwitterBootstrap mui [Material UI] - React [Netflix, Facebook, Amazon] Material UI - Angular Telerik - JSP, PHP, React, Angular, ASP.NET DevExpress
jQueryUI

                                  Setup Project

  1. Download and Install "Visual Studio Code Editor"

  2. Create a folder for project on your PC

          D:\Bootstrap-workshop

  3. Open folder in Visual Studio Code

  4. Add folders public : It is for static resources like : html, image, docs src : It is for dynamic resources like: css, js, sass, ts etc..

  5. Add a startup page "Index.html" in public folder

  6. Test your page by opening with Live Server

    [Visual Studio Code - Extentions - Download Live Server Extention]

  7. Right Click in HTML page => Open with Live Server | Open In Browser

                         Enable Bootstrap Icons for your Page
                     ---------------------------------------------------

  8. Visit the website www.getbootstrap.com

  9. Go to "Icons" category and copy its CSS CDN link and paste in your page

Syntax: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"> 

- Bootstrap ICONS are provided as CSS classes, which you can implement
  in page.

            <span  class="bi bi-house">
            <span  class="bi bi-bell">
            <span  class="bi bi-facebook">

Ex:

<title>Bootstrap-Workshop</title>

Shopping Online

Follow us on Facebook Twitter Instagram

                    Enable Bootstrap Utilities and Components

  1. Visit "www.getbootstrap.com"

  2. Click on Download

  3. Copy CDN links for CSS and jQuery

             bootstrap.css
         bootstrap.bundle.js
         poper.js [2 components  dropdown positions, tooltip]

    Paste CSS Link in Paste Script Link in

Ex:

<title>Bootstrap-Workshop</title> 
<h1> <span class="bi bi-basket-fill"></span> Shopping Online</h1>
<p>Follow us on <span class="bi bi-facebook"></span> Facebook <span class="bi bi-twitter"></span> Twitter  <span class="bi bi-instagram"></span> Instagram</p>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Summary

  • bootstrap-icons.css ] head

  • bootstrap.min.css ]

  • bootstrap.bundle.min.js ] body

                                   Layout Classes

.container Mobiles 540px .container-sm Tab .container-lg PC [1200px] .container-md PC [1300px] .container-xl Laptop [1400px] .container-xxl Laptop [1600px] .container-fluid Responsive

                                Box Model Classes
                                ---------------------------
  • Box model comprises of 1. margin 2. padding 3. border 4. border-radius 5. width 6. height

Margins: .m margin all directions .ms margin-left [start] [ <5 ml ] .me margin-right[end] .mt margin-top .mb margin-bottom .mx margin-x-axis .my margin-y-axis

    Break-Point
    {1 to 4}

Syntax:

Ex:

Shopping Online

Follow us on Facebook Twitter Instagram

Padding: .p .ps .pe .pt .pb .px .py

Break-Point : {1 to 4}

Border : .border .border-{1 to 3} .border-{primary | danger | success | warning | infor | dark }

Radius : .rounded .rounded-{1 to 3} .rounded-pill .rounded-circle

Width: .w- {25, 50, 75, 100} Height: .h- {25, 50, 75, 100}

Text Colors: .text-{contextual }

Background Color: .bg-{contextual}

Summary

  • Adding CDN Links bootstrap-icons.css bootstrap.css bootstrap.bundle.js

  • Icons classes bi bi-house

  • Bootstrap classes margins padding border rounded width height text color bg color

                                     Display Classes

.d-none display none .d-block display block .d-inline display inline .d-flex display flex

Ex: Inline is applied to elements in container

Home
About
Contact

Ex: Flex is applied to container

<nav class="d-flex">
    <div>Home</div>
    <div>About</div>
    <div>Contact</div>
 </nav>

  • Flex can have alignment and direction

    .justify-content-between .justify-content-center .justify-content-baseline .align-items-center .align-items-baseline .flex-wrap .flex-row .flex-column

Ex:

Home
About
Contact
Electronics
Footwear

FAQ: How to keep any content exaclty center of page? Ans : d-flex, justify-content-center, align-items-center

Ex:

<title>Bootstrap-Workshop</title>

User Login

User Name
Password
Login
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Ex:

<title>Bootstrap-Workshop</title>

Neflix

Watch movies, tv shows online.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Ex:

<title>Bootstrap-Workshop</title>
Shopper
Home Catalog Shop Blog Pages
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> 
                                  Positions

.position-relative .position-fixed .position-absolute .position-static .position-sticky

.top-{0,25,50,75,100} .bottom .start .end

Ex:

<title>Bootstrap-Workshop</title>

Positions

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Ex:

<title>Bootstrap-Workshop</title>

Categories

Electronics
Mobiles
Televisions
Watch
Mobiles
Televisions
Watch
Mobiles
Televisions
Watch
Mobiles
Televisions
Watch
Mobiles
Televisions
Watch
Mobiles
Televisions
Watch
Mobiles
Televisions
Watch
Mobiles
Televisions
Watch
Mobiles
Televisions
Watch
Footwear
Boots
Casuals
Sneakers
Boots
Casuals
Sneakers
Boots
Casuals
Sneakers
Boots
Casuals
Sneakers
Boots
Casuals
Sneakers
Boots
Casuals
Sneakers
Boots
Casuals
Sneakers
Boots
Casuals
Sneakers
Boots
Casuals
Sneakers
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> 
                                Rows and Columns [Grid]

.row .col .col-{1 to 12}

Ex:

Product Details

Name
Nike Casuals
Price
5600.44
Stock
Available

Ex:

Columns

Col-1
Col-2
Col-3
Col-1
Col-2

Summary

  • Display

  • Position

  • Rows and Columns

                                      Font Styles

.fw-bold bold .fst-italic italic .fs-{1 to 6} size

Syntax:

Welcome to Bootstrap

                                    Text Effects

.text-center .text-start .text-end .text-justify .text-{contextual}

                                Bootstrap Components
  1. alerts
    • Embedded message boxes in page.
    • You can control with jQuery attributes

classes: .alert .alert-dismissible .alert-{contextual} .alert-title .alert-subtitle .alert-text .alert-link

attributes: data-bs-dismiss close any component

Ex:

<title>Bootstrap-Workshop</title>

Alerts

Delete Record

Record will be deleted.

Help?

Record Inserted

Record inserted successfully..

OK
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  1. Buttons

.btn .btn-{contextual} .btn-outline-{contextual} .btn-group .btn-group-vertical .btn-link .btn-close etc..

Ex:

<title>Bootstrap-Workshop</title>

Button Contextual

Insert Insert Logout

Button Group

Prev. Next

Button Group Verical

Home About Contact
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  1. Cards

.card .card-header .card-body .card-footer .card-title .card-subtitle .card-img-top .card-img-overlay

Ex:

<title>Bootstrap-Workshop</title>

UI Technologies

Online Training

Join Course

Angular JS

Online Training

Join Course

RPA

Online Training

Join Course
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Forms .form-label .form-control textbox, password, number, date, email, url etc.. .form-select .form-range .form-check-input radio and checkbox .form-switch radio and checkbox as switch

Ex:

<title>Bootstrap-Workshop</title>

Register User

User Name
Password
City
Your City Delhi Hyd
Age
Subscribe
Yes
Register
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> 
                                   Input Group

.input-group .input-group-text .input-group-lg

Ex:

<title>Bootstrap-Workshop</title>

Amazon Search

All Mobiles Fashion

Neflix

Get Started

Verify Account

Verify
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> 
                                      Modals

.modal .modal-dialog .modal-content .modal-header .modal-body .modal-footer .fade

data-bs-toggle : click data-bs-target : It refers to ID data-bs-dismiss

Ex:

<title>Bootstrap-Workshop</title>

Dialog - Modal

Login View Course

User Login

User Name
Password
Login Cancel 
 <div class="modal fade" id="course">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h2>UI Technologies</h2>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-4">
                        <img src="ui.jpg" width="100" height="100">
                    </div>
                    <div class="col-8">
                        <ol>
                            <li>HTML</li>
                            <li>CSS</li>
                            <li>Bootstrap</li>
                            <li>JavaScript</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

                                     Carousel

Basic Classes .carousel .carousel-inner .carousel-item .active : One Item must be active .slide : It defines sliding animation

Attribute data-bs-ride : to start animation

Control Classes .carousel-control-prev .carousel-control-prev-icon .carousel-control-next .carousel-control-next-icon .carousel-dark

Attribute data-bs-slide="prev" data-bs-slide="next" data-bs-target="#bannerId"

Indicator Classes .carousel-indicators .active

Attribute data-bs-slide-to="0"

Timings data-bs-interval="1000" // 1 sec

Ex:

<title>Bootstrap-Workshop</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Ex:

<title>Bootstrap-Workshop</title>

Register with us for more offers

Register
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> 
                                    Dropdowns

.dropdown .dropup .dropend .dropstart .dropdown-menu .dropdown-item .dropdown-toggle

Ex:

<title>Bootstrap-Workshop</title>

Dropdown

Language
  • English
  • हिंदी
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> Spinners .spinner-grow <title>Bootstrap-Workshop</title>

Dropdown

Language
  • English
  • हिंदी
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

About

There is the Bootstrap-5 complete notes with example...

Resources

Readme
Activity

Stars

3 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors