Uploaded byLibin51
PPTX, PDF84 views

bootstrap.pptx

Bootstrap is a free and open-source front-end framework for faster and easier web development. It includes HTML and CSS templates for common components like navigation bars, image carousels, alerts and more. Bootstrap also uses a responsive 12-column grid system and provides various utility classes for typography, spacing, sizing and more. Some key Bootstrap elements include containers, grids, images, dropdowns, navbars and utilities for layout, formatting and styling content.

Embed presentation

Download to read offline
bootstrap
Bootstrap is a free front-end framework for faster and easier web development Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins Bootstrap also gives you the ability to easily create responsive designs
Bootstrap 5 CDN <!-- Latest compiled and minified CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/ css/bootstrap.min.css" rel="stylesheet"> <!-- Latest compiled JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist /js/bootstrap.bundle.min.js"></script>
BOOTSTRAP 5 CONTAINERS The .container class provides a responsive fixed width container The .container-fluid class provides a full width container, spanning the entire width of the viewport
Use the .container class to create a responsive, fixed-width container. Fixed Container <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/cs s/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/b ootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <h1>My First Bootstrap Page</h1> <p>This part is inside a .container class.</p> <p>The .container class provides a responsive fixed width container.</p> <p>Resize the browser window to see that the container width will change at different breakpoints.</p> </div> </body> </html>
Fluid Container <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container-fluid"> <h1>My First Bootstrap Page</h1> <p>This part is inside a .container-fluid class.</p> <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p> </div> </body> </html>
Container Padding <div class="container pt-5"></div> Container Border and Color <div class="container p-5 my-5 border"></div> <div class="container p-5 my-5 bg-dark text- white"></div> <div class="container p-5 my-5 bg-primary text- white"></div> Try it Yourself »
Responsive Containers <div class="container-sm">.container-sm</div> <div class="container-md">.container-md</div> <div class="container-lg">.container-lg</div> <div class="container-xl">.container-xl</div> <div class="container-xxl">.container-xxl</div>
BOOTSTRAP 5 GRID SYSTEM Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns: span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 4 span 4 span 4 span 4 span 8 span 6 span 6 span 12
Grid Classes • .col- (extra small devices - screen width less than 576px) • .col-sm- (small devices - screen width equal to or greater than 576px) • .col-md- (medium devices - screen width equal to or greater than 768px) • .col-lg- (large devices - screen width equal to or greater than 992px) • .col-xl- (xlarge devices - screen width equal to or greater than 1200px) • .col-xxl- (xxlarge devices - screen width equal to or greater than 1400px) The Bootstrap 5 grid system has six classes:
Basic Structure of a Bootstrap 5 Grid <!-- Control the column width, and how they should appear on different devices --> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <!-- Or let Bootstrap automatically handle the layout --> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
Row Cols <div class="row row-cols-1"> <div class="col bg-success">1 of 2</div> <div class="col bg-warning">2 of 2</div> </div> <br> <div class="row row-cols-2"> <div class="col bg-success">1 of 4</div> <div class="col bg-warning">2 of 4</div> <div class="col bg-success">3 of 4</div> <div class="col bg-warning">4 of 4</div> </div> <br> <div class="row row-cols-3"> <div class="col bg-success">1 of 6</div> <div class="col bg-warning">2 of 6</div> <div class="col bg-success">3 of 6</div> <div class="col bg-warning">4 of 6</div> <div class="col bg-success">5 of 6</div> <div class="col bg-warning">6 of 6</div> </div> </div>
Bootstrap nested rows and columns
BOOTSTRAP 5 IMAGES Image Shapes
Rounded Corners <img src="cinqueterre.jpg" class="rounded" alt= "Cinque Terre"> Circle <img src="cinqueterre.jpg" class="rounded- circle" alt="Cinque Terre"> Thumbnail <img src="cinqueterre.jpg" class="img- thumbnail" alt="Cinque Terre">
Aligning Images <img src="paris.jpg" class="float-start"> <img src="paris.jpg" class="float-end"> Centered Image <img src="paris.jpg" class="mx-auto d-block"> Responsive Images <img class="img-fluid" src="ny.jpg" alt="New York">
BOOTSTRAP 5 UTILITIES Borders <span class="border"></span> <span class="border border- 0"></span> <span class="border border-top- 0"></span> <span class="border border-end- 0"></span> <span class="border border-bottom- 0"></span> <span class="border border-start- 0"></span> <br> <span class="border-top"></span> <span class="border-end"></span> <span class="border-bottom"></span> <span class="border-start"></span>
Border Width <span class="border border-1"></span> <span class="border border-2"></span> <span class="border border-3"></span> <span class="border border-4"></span> <span class="border border-5"></span>
<span class="border border-primary"></span> <span class="border border-secondary"></span> <span class="border border-success"></span> <span class="border border-danger"></span> <span class="border border-warning"></span> <span class="border border-info"></span> <span class="border border-light"></span> <span class="border border-dark"></span> <span class="border border-white"></span> Border Color
Border Radius <span class="rounded"></span> <span class="rounded-top"></span> <span class="rounded-end"></span> <span class="rounded-bottom"></span> <span class="rounded-start"></span> <span class="rounded-circle"></span> <span class="rounded- pill" style="width:130px"></span> <span class="rounded-0"></span> <span class="rounded-1"></span> <span class="rounded-2"></span> <span class="rounded-3"></span> <span class="rounded-4"></span> <span class="rounded-5"></span>
Width <div class="w-25 bg-warning">Width 25%</div> <div class="w-50 bg-warning">Width 50%</div> <div class="w-75 bg-warning">Width 75%</div> <div class="w-100 bg-warning">Width 100%</div> <div class="w-auto bg-warning">Auto Width</div> <div class="mw-100 bg-warning">Max Width 100%</div>
<div style="height:200px;background- color:#ddd"> <div class="h-25 bg-warning">Height 25%</div> <div class="h-50 bg-warning">Height 50%</div> <div class="h-75 bg-warning">Height 75%</div> <div class="h-100 bg-warning">Height 100%</div> <div class="h-auto bg-warning">Auto Height</div> <div class="mh-100 bg- warning" style="height:500px">Max Height 100%</div> </div>
Spacing .m-# / m-*-# margin on all sides .mt-# / mt-*-# margin top .mb-# / mb-*-# margin bottom .ms-# / ms-*-# margin left .me-# / me-*-# margin right .mx-# / mx-*-# margin left and right .my-# / my-*-# margin top and bottom .p-# / p-*-# padding on all sides .pt-# / pt-*-# padding top .pb-# / pb-*-# padding bottom .ps-# / ps-*-# padding left .pe-# / pe-*-# padding right .py-# / py-*-# padding top and bottom .px-# / px-*-# padding left and right
Shadows <div class="shadow-none p-4 mb-4 bg-light">No shadow</div> <div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div> <div class="shadow p-4 mb-4 bg-white">Default shadow</div> <div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
Colors The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light Background Colors The classes for background colors are: .bg-primary, .bg-success, .bg- info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
BOOTSTRAP 5 TEXT/TYPOGRAPHY Bootstrap 5 Default Settings Bootstrap 5 uses a default font-size of 1rem (16px by default), and its line-height is 1.5. In addition, all <p> elements have margin-top: 0 and margin- bottom: 1rem (16px by default).
<h1> - <h6> Bootstrap 5 styles HTML headings (<h1> to <h6>) with a bolder font-weight and a responsive font-size. <p class="h1">h1 Bootstrap heading</p> <p class="h2">h2 Bootstrap heading</p> <p class="h3">h3 Bootstrap heading</p> <p class="h4">h4 Bootstrap heading</p> <p class="h5">h5 Bootstrap heading</p> <p class="h6">h6 Bootstrap heading</p>
Display Headings <div class="container mt-3"> <h1>Display Headings</h1> <p>Display headings are used to stand out more than normal headings (larger font-size and lighter font- weight):</p> <h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1> <h1 class="display-5">Display 5</h1> <h1 class="display-6">Display 6</h1> </div>
<small> <div class="container mt-3"> <h1>Smaller, Secondary Text</h1> <p>The small element (and the .small class) is used to create a smaller, secondary text in any heading:</p> <h1>h1 heading <small>secondary text</small></h1> <h2>h2 heading <small>secondary text</small></h2> <h3>h3 heading <small>secondary text</small></h3> <h4>h4 heading <small>secondary text</small></h4> <h5>h5 heading <small>secondary text</small></h5> <h6>h6 heading <small>secondary text</small></h6> </div>
<mark> <div class="container mt-3"> <h1>Highlight Text</h1> <p>Use the mark element (or the .mark class) to <mark>highlight</mark> text.</p> </div> <abbr> <div class="container mt-3"> <h1>Abbreviations</h1> <p>The abbr element is used to mark up an abbreviation or acronym:</p> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> </div>
More Typography Classes Class Description .lead Makes a paragraph stand out .text-start Indicates left-aligned text .text-break Prevents long text from breaking layout .text-center Indicates center-aligned text .text-decoration-none Removes the underline from a link .text-end Indicates right-aligned text .text-nowrap Indicates no wrap text .text-lowercase Indicates lowercased text .text-uppercase Indicates uppercased text .text-capitalize Indicates capitalized text .initialism Displays the text inside an <abbr> element in a slightly smaller font size .list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) .list-inline Places all list items on a single line (used together with .list-inline-item on each <li> elements)
BOOTSTRAP 5 DROPDOWNS Basic Dropdown <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Link 1</a></li> <li><a class="dropdown-item" href="#">Link 2</a></li> <li><a class="dropdown-item" href="#">Link 3</a></li> </ul> </div>
Dropdown Divider The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal border: <li><hr class="dropdown-divider"></hr></li>
Disable and Active items <li><a class="dropdown- item" href="#">Normal</a></li> <li><a class="dropdown-item active" href="#">Active</a></li> <li><a class="dropdown-item disabled" href="#">Disabled</a></li>
BOOTSTRAP 5 NAVBARS Basic Navbar nav class="navbar navbar-expand-sm bg-light"> <div class="container-fluid"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </div> </nav>
Vertical Navbar <!-- A grey vertical navbar --> <nav class="navbar bg-light"> ... </nav> Centered Navbar <nav class="navbar navbar-expand-sm bg- light justify-content-center"> ... </nav>
Colored Navbar <!-- Grey with black text --> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <div class="container-fluid"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav> <!-- Black background with white text --> <nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav> <!-- Blue background with white text --> <nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
Brand / Logo <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Logo</a> </div> </nav> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded- pill"> </a> </div> </nav>
Navbar Text <nav class="navbar navbar-expand-sm bg-dark navbar- dark"> <div class="container-fluid"> <span class="navbar-text">Navbar text</span> </div> </nav> Navbar With Dropdown <li class="nav-item dropdown"> <a class="nav-link dropdown- toggle" href="#" role="button" data-bs- toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Link</a></li> <li><a class="dropdown-item" href="#">Another link</a></li> <li><a class="dropdown-item" href="#">A third link</a></li> </ul> </li>
Navbar Forms and Buttons <nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="javascript:void(0)">Logo</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data- bs-target="#mynavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="navbar-nav me-auto"> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)">Link</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="text" placeholder="Search"> <button class="btn btn-primary" type="button">Search</button> </form> </div> </div> </nav>
Fixed Navigation Bar <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>

More Related Content

PPTX
Bootstrap 5 ppt
byMallikarjuna G D
 
PDF
7.-Bootstrap-5-report powerpoint presentation
byJohnLagman3
 
PDF
Bootstrap for webtechnology_data science.pdf
byHarish Khodke
 
PPTX
Bootstrap SLIDES for web development course
bydreamy678
 
PPT
Introduction to BOOTSTRAP
byJeanie Arnoco
 
PPT
Twitter bootstrap training_session_ppt
byRadheshyam Kori
 
PDF
HTML & CSS #10 : Bootstrap
byJean Michel
 
PPTX
Bootstrap
byPumoTechnovation
 
Bootstrap 5 ppt
byMallikarjuna G D
 
7.-Bootstrap-5-report powerpoint presentation
byJohnLagman3
 
Bootstrap for webtechnology_data science.pdf
byHarish Khodke
 
Bootstrap SLIDES for web development course
bydreamy678
 
Introduction to BOOTSTRAP
byJeanie Arnoco
 
Twitter bootstrap training_session_ppt
byRadheshyam Kori
 
HTML & CSS #10 : Bootstrap
byJean Michel
 
Bootstrap
byPumoTechnovation
 

Similar to bootstrap.pptx

PDF
Pemrograman Web 4 - Bootstrap 3
byNur Fadli Utomo
 
PDF
Bootstrap Presentation Mitesh
byMitesh Gandhi
 
PPTX
Bootstrap [part 1]
byGhanshyam Patel
 
PPTX
Create Responsive Website Design with Bootstrap 3
byWahyu Putra
 
PPTX
Bootstrap 3
byMcSoftsis
 
PDF
Introduction to Bootstrap
byRon Reiter
 
PPT
Responsive web design
byAirticsTrainer
 
PPTX
Reboot-Typography.pptx reboot typography to help you in research
byAadiChauhan2
 
PDF
Lesson 1 - Introduction to Boostrap 5.pdf
byJeffreyCManiquiz
 
PPTX
Module 3 - Intro to Bootstrap
byKatherine McCurdy-Lapierre, R.G.D.
 
PPTX
Bootstrap - Basics
byFirosK2
 
PPTX
Bootstrap: the full overview
byGill Cleeren
 
PDF
Bootstrap Workout 2015
byRob Davarnia
 
PDF
Lesson 2 - Boostrap 5 - Containers and Grid.pdf
byJeffreyCManiquiz
 
PPTX
Intro to Bootstrap
bykjkleindorfer
 
PDF
The Ultimate Guide to Bootstrap for Beginners.pdf
bywebcooks Digital Academy
 
PPTX
Web development and web design with seo
byRajat Anand
 
PPT
Twitter bootstrap (css, components and javascript)
byNexThoughts Technologies
 
PPTX
Bootstrap PPT by Mukesh
byMukesh Kumar
 
PPTX
An introduction to bootstrap
byMind IT Systems
 
Pemrograman Web 4 - Bootstrap 3
byNur Fadli Utomo
 
Bootstrap Presentation Mitesh
byMitesh Gandhi
 
Bootstrap [part 1]
byGhanshyam Patel
 
Create Responsive Website Design with Bootstrap 3
byWahyu Putra
 
Bootstrap 3
byMcSoftsis
 
Introduction to Bootstrap
byRon Reiter
 
Responsive web design
byAirticsTrainer
 
Reboot-Typography.pptx reboot typography to help you in research
byAadiChauhan2
 
Lesson 1 - Introduction to Boostrap 5.pdf
byJeffreyCManiquiz
 
Module 3 - Intro to Bootstrap
byKatherine McCurdy-Lapierre, R.G.D.
 
Bootstrap - Basics
byFirosK2
 
Bootstrap: the full overview
byGill Cleeren
 
Bootstrap Workout 2015
byRob Davarnia
 
Lesson 2 - Boostrap 5 - Containers and Grid.pdf
byJeffreyCManiquiz
 
Intro to Bootstrap
bykjkleindorfer
 
The Ultimate Guide to Bootstrap for Beginners.pdf
bywebcooks Digital Academy
 
Web development and web design with seo
byRajat Anand
 
Twitter bootstrap (css, components and javascript)
byNexThoughts Technologies
 
Bootstrap PPT by Mukesh
byMukesh Kumar
 
An introduction to bootstrap
byMind IT Systems
 

Recently uploaded

PPTX
LEGAL AND RIGHTS ASPECTS OF FAMILY PLANNING.pptx
bysonia
 
PPTX
Alma Šuto - From Tradition to Innovation: Creative AI in Education
bybvtricks
 
PPTX
Unit 3- Culture.pptx....................
byAkanksha Kotangale
 
PDF
Aminoglycosides.pdf for B.Pharmacy Medicinal Chemistry-III (BP601T), GPAT, a...
bymominzarinamdnajeeb
 
PPTX
Exploring Higher education and its pathways
byEVAMAEBONGHANOY5
 
PDF
ĐỀ MINH HỌA KỲ THI TỐT NGHIỆP TRUNG HỌC PHỔ THÔNG NĂM 2026 MÔN TIẾNG ANH 2026...
byNguyen Thanh Tu Collection
 
PPTX
Toba Tek Singh - Visualising Partition through Manto's Lens
byMiral Joshi
 
PPTX
YSPH VMOC Special Report - Measles - The Americas 1-25-2026
byYale School of Public Health - The Virtual Medical Operations Center (VMOC)
 
PPTX
Statistical Data Analysis using R Programming.pptx
byVETRISELVIP1
 
PPTX
Appreciations - Jan 26 01.pptxkkkmmkmkmkmkm
bypreetheshparmar
 
PPTX
MENTAL STATUS EXAMINATION Part-1.Shilpa hotakar.pptx
bySHILPA HOTAKAR
 
PDF
Fast Followers Project, Embedding Net Zero into Wakefield Metropolitan Distri...
byAssociation for Project Management
 
PPTX
Ultrasound .pptx by Nagmani ojha (paramedical department)(Radiation technolog...
bynagmaniojha8
 
PPTX
Central Line Associated Bloodstream Infection
bynabinabhaila40
 
PDF
U.S. Departments of Education and Treasury fact sheet
byMebane Rash
 
PDF
Problem Solving Agents in Artificial Intelligence with Examples and Water Jug...
byARTHIDEVARANIP
 
PPTX
Metabolism ( BIOCHEMISTRY & CLINICAL PATHOLOGY )
byBushraDeshpande
 
PPTX
Mohan - "A man of silence and authority"
bynidhibachauhan46
 
PPTX
Appreciations - Jan 26 01.pptxkjkjkkjkjkjkj
bypreetheshparmar
 
PDF
Beak Modifications by Dr. Ramzan Virani pptx.pdf
byDr. Ramzan Virani
 
LEGAL AND RIGHTS ASPECTS OF FAMILY PLANNING.pptx
bysonia
 
Alma Šuto - From Tradition to Innovation: Creative AI in Education
bybvtricks
 
Unit 3- Culture.pptx....................
byAkanksha Kotangale
 
Aminoglycosides.pdf for B.Pharmacy Medicinal Chemistry-III (BP601T), GPAT, a...
bymominzarinamdnajeeb
 
Exploring Higher education and its pathways
byEVAMAEBONGHANOY5
 
ĐỀ MINH HỌA KỲ THI TỐT NGHIỆP TRUNG HỌC PHỔ THÔNG NĂM 2026 MÔN TIẾNG ANH 2026...
byNguyen Thanh Tu Collection
 
Toba Tek Singh - Visualising Partition through Manto's Lens
byMiral Joshi
 
YSPH VMOC Special Report - Measles - The Americas 1-25-2026
byYale School of Public Health - The Virtual Medical Operations Center (VMOC)
 
Statistical Data Analysis using R Programming.pptx
byVETRISELVIP1
 
Appreciations - Jan 26 01.pptxkkkmmkmkmkmkm
bypreetheshparmar
 
MENTAL STATUS EXAMINATION Part-1.Shilpa hotakar.pptx
bySHILPA HOTAKAR
 
Fast Followers Project, Embedding Net Zero into Wakefield Metropolitan Distri...
byAssociation for Project Management
 
Ultrasound .pptx by Nagmani ojha (paramedical department)(Radiation technolog...
bynagmaniojha8
 
Central Line Associated Bloodstream Infection
bynabinabhaila40
 
U.S. Departments of Education and Treasury fact sheet
byMebane Rash
 
Problem Solving Agents in Artificial Intelligence with Examples and Water Jug...
byARTHIDEVARANIP
 
Metabolism ( BIOCHEMISTRY & CLINICAL PATHOLOGY )
byBushraDeshpande
 
Mohan - "A man of silence and authority"
bynidhibachauhan46
 
Appreciations - Jan 26 01.pptxkjkjkkjkjkjkj
bypreetheshparmar
 
Beak Modifications by Dr. Ramzan Virani pptx.pdf
byDr. Ramzan Virani
 

bootstrap.pptx

  • 1.
  • 2.
    Bootstrap is afree front-end framework for faster and easier web development Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins Bootstrap also gives you the ability to easily create responsive designs
  • 3.
    Bootstrap 5 CDN <!--Latest compiled and minified CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/ css/bootstrap.min.css" rel="stylesheet"> <!-- Latest compiled JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist /js/bootstrap.bundle.min.js"></script>
  • 4.
    BOOTSTRAP 5 CONTAINERS The.container class provides a responsive fixed width container The .container-fluid class provides a full width container, spanning the entire width of the viewport
  • 5.
    Use the .containerclass to create a responsive, fixed-width container. Fixed Container <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/cs s/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/b ootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <h1>My First Bootstrap Page</h1> <p>This part is inside a .container class.</p> <p>The .container class provides a responsive fixed width container.</p> <p>Resize the browser window to see that the container width will change at different breakpoints.</p> </div> </body> </html>
  • 6.
    Fluid Container <!DOCTYPE html> <htmllang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container-fluid"> <h1>My First Bootstrap Page</h1> <p>This part is inside a .container-fluid class.</p> <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p> </div> </body> </html>
  • 7.
    Container Padding <div class="containerpt-5"></div> Container Border and Color <div class="container p-5 my-5 border"></div> <div class="container p-5 my-5 bg-dark text- white"></div> <div class="container p-5 my-5 bg-primary text- white"></div> Try it Yourself »
  • 8.
    Responsive Containers <div class="container-sm">.container-sm</div> <divclass="container-md">.container-md</div> <div class="container-lg">.container-lg</div> <div class="container-xl">.container-xl</div> <div class="container-xxl">.container-xxl</div>
  • 9.
    BOOTSTRAP 5 GRIDSYSTEM Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns: span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 4 span 4 span 4 span 4 span 8 span 6 span 6 span 12
  • 10.
    Grid Classes • .col-(extra small devices - screen width less than 576px) • .col-sm- (small devices - screen width equal to or greater than 576px) • .col-md- (medium devices - screen width equal to or greater than 768px) • .col-lg- (large devices - screen width equal to or greater than 992px) • .col-xl- (xlarge devices - screen width equal to or greater than 1200px) • .col-xxl- (xxlarge devices - screen width equal to or greater than 1400px) The Bootstrap 5 grid system has six classes:
  • 11.
    Basic Structure ofa Bootstrap 5 Grid <!-- Control the column width, and how they should appear on different devices --> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <!-- Or let Bootstrap automatically handle the layout --> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
  • 12.
    Row Cols <div class="rowrow-cols-1"> <div class="col bg-success">1 of 2</div> <div class="col bg-warning">2 of 2</div> </div> <br> <div class="row row-cols-2"> <div class="col bg-success">1 of 4</div> <div class="col bg-warning">2 of 4</div> <div class="col bg-success">3 of 4</div> <div class="col bg-warning">4 of 4</div> </div> <br> <div class="row row-cols-3"> <div class="col bg-success">1 of 6</div> <div class="col bg-warning">2 of 6</div> <div class="col bg-success">3 of 6</div> <div class="col bg-warning">4 of 6</div> <div class="col bg-success">5 of 6</div> <div class="col bg-warning">6 of 6</div> </div> </div>
  • 13.
  • 14.
  • 15.
    Rounded Corners <img src="cinqueterre.jpg"class="rounded" alt= "Cinque Terre"> Circle <img src="cinqueterre.jpg" class="rounded- circle" alt="Cinque Terre"> Thumbnail <img src="cinqueterre.jpg" class="img- thumbnail" alt="Cinque Terre">
  • 16.
    Aligning Images <img src="paris.jpg"class="float-start"> <img src="paris.jpg" class="float-end"> Centered Image <img src="paris.jpg" class="mx-auto d-block"> Responsive Images <img class="img-fluid" src="ny.jpg" alt="New York">
  • 17.
    BOOTSTRAP 5 UTILITIES Borders <spanclass="border"></span> <span class="border border- 0"></span> <span class="border border-top- 0"></span> <span class="border border-end- 0"></span> <span class="border border-bottom- 0"></span> <span class="border border-start- 0"></span> <br> <span class="border-top"></span> <span class="border-end"></span> <span class="border-bottom"></span> <span class="border-start"></span>
  • 18.
    Border Width <span class="borderborder-1"></span> <span class="border border-2"></span> <span class="border border-3"></span> <span class="border border-4"></span> <span class="border border-5"></span>
  • 19.
    <span class="border border-primary"></span> <spanclass="border border-secondary"></span> <span class="border border-success"></span> <span class="border border-danger"></span> <span class="border border-warning"></span> <span class="border border-info"></span> <span class="border border-light"></span> <span class="border border-dark"></span> <span class="border border-white"></span> Border Color
  • 20.
    Border Radius <span class="rounded"></span> <spanclass="rounded-top"></span> <span class="rounded-end"></span> <span class="rounded-bottom"></span> <span class="rounded-start"></span> <span class="rounded-circle"></span> <span class="rounded- pill" style="width:130px"></span> <span class="rounded-0"></span> <span class="rounded-1"></span> <span class="rounded-2"></span> <span class="rounded-3"></span> <span class="rounded-4"></span> <span class="rounded-5"></span>
  • 21.
    Width <div class="w-25 bg-warning">Width25%</div> <div class="w-50 bg-warning">Width 50%</div> <div class="w-75 bg-warning">Width 75%</div> <div class="w-100 bg-warning">Width 100%</div> <div class="w-auto bg-warning">Auto Width</div> <div class="mw-100 bg-warning">Max Width 100%</div>
  • 22.
    <div style="height:200px;background- color:#ddd"> <div class="h-25bg-warning">Height 25%</div> <div class="h-50 bg-warning">Height 50%</div> <div class="h-75 bg-warning">Height 75%</div> <div class="h-100 bg-warning">Height 100%</div> <div class="h-auto bg-warning">Auto Height</div> <div class="mh-100 bg- warning" style="height:500px">Max Height 100%</div> </div>
  • 23.
    Spacing .m-# / m-*-#margin on all sides .mt-# / mt-*-# margin top .mb-# / mb-*-# margin bottom .ms-# / ms-*-# margin left .me-# / me-*-# margin right .mx-# / mx-*-# margin left and right .my-# / my-*-# margin top and bottom .p-# / p-*-# padding on all sides .pt-# / pt-*-# padding top .pb-# / pb-*-# padding bottom .ps-# / ps-*-# padding left .pe-# / pe-*-# padding right .py-# / py-*-# padding top and bottom .px-# / px-*-# padding left and right
  • 24.
    Shadows <div class="shadow-none p-4mb-4 bg-light">No shadow</div> <div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div> <div class="shadow p-4 mb-4 bg-white">Default shadow</div> <div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
  • 25.
    Colors The classes fortext colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light Background Colors The classes for background colors are: .bg-primary, .bg-success, .bg- info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
  • 26.
    BOOTSTRAP 5 TEXT/TYPOGRAPHY Bootstrap5 Default Settings Bootstrap 5 uses a default font-size of 1rem (16px by default), and its line-height is 1.5. In addition, all <p> elements have margin-top: 0 and margin- bottom: 1rem (16px by default).
  • 27.
    <h1> - <h6> Bootstrap5 styles HTML headings (<h1> to <h6>) with a bolder font-weight and a responsive font-size. <p class="h1">h1 Bootstrap heading</p> <p class="h2">h2 Bootstrap heading</p> <p class="h3">h3 Bootstrap heading</p> <p class="h4">h4 Bootstrap heading</p> <p class="h5">h5 Bootstrap heading</p> <p class="h6">h6 Bootstrap heading</p>
  • 28.
    Display Headings <div class="containermt-3"> <h1>Display Headings</h1> <p>Display headings are used to stand out more than normal headings (larger font-size and lighter font- weight):</p> <h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1> <h1 class="display-5">Display 5</h1> <h1 class="display-6">Display 6</h1> </div>
  • 29.
    <small> <div class="container mt-3"> <h1>Smaller,Secondary Text</h1> <p>The small element (and the .small class) is used to create a smaller, secondary text in any heading:</p> <h1>h1 heading <small>secondary text</small></h1> <h2>h2 heading <small>secondary text</small></h2> <h3>h3 heading <small>secondary text</small></h3> <h4>h4 heading <small>secondary text</small></h4> <h5>h5 heading <small>secondary text</small></h5> <h6>h6 heading <small>secondary text</small></h6> </div>
  • 30.
    <mark> <div class="container mt-3"> <h1>HighlightText</h1> <p>Use the mark element (or the .mark class) to <mark>highlight</mark> text.</p> </div> <abbr> <div class="container mt-3"> <h1>Abbreviations</h1> <p>The abbr element is used to mark up an abbreviation or acronym:</p> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> </div>
  • 31.
    More Typography Classes ClassDescription .lead Makes a paragraph stand out .text-start Indicates left-aligned text .text-break Prevents long text from breaking layout .text-center Indicates center-aligned text .text-decoration-none Removes the underline from a link .text-end Indicates right-aligned text .text-nowrap Indicates no wrap text .text-lowercase Indicates lowercased text .text-uppercase Indicates uppercased text .text-capitalize Indicates capitalized text .initialism Displays the text inside an <abbr> element in a slightly smaller font size .list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) .list-inline Places all list items on a single line (used together with .list-inline-item on each <li> elements)
  • 32.
    BOOTSTRAP 5 DROPDOWNS BasicDropdown <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Link 1</a></li> <li><a class="dropdown-item" href="#">Link 2</a></li> <li><a class="dropdown-item" href="#">Link 3</a></li> </ul> </div>
  • 33.
    Dropdown Divider The .dropdown-dividerclass is used to separate links inside the dropdown menu with a thin horizontal border: <li><hr class="dropdown-divider"></hr></li>
  • 34.
    Disable and Activeitems <li><a class="dropdown- item" href="#">Normal</a></li> <li><a class="dropdown-item active" href="#">Active</a></li> <li><a class="dropdown-item disabled" href="#">Disabled</a></li>
  • 35.
    BOOTSTRAP 5 NAVBARS BasicNavbar nav class="navbar navbar-expand-sm bg-light"> <div class="container-fluid"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </div> </nav>
  • 36.
    Vertical Navbar <!-- Agrey vertical navbar --> <nav class="navbar bg-light"> ... </nav> Centered Navbar <nav class="navbar navbar-expand-sm bg- light justify-content-center"> ... </nav>
  • 37.
    Colored Navbar <!-- Greywith black text --> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <div class="container-fluid"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav> <!-- Black background with white text --> <nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav> <!-- Blue background with white text --> <nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
  • 38.
    Brand / Logo <navclass="navbar navbar-expand-sm bg-dark navbar-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Logo</a> </div> </nav> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded- pill"> </a> </div> </nav>
  • 39.
    Navbar Text <nav class="navbarnavbar-expand-sm bg-dark navbar- dark"> <div class="container-fluid"> <span class="navbar-text">Navbar text</span> </div> </nav> Navbar With Dropdown <li class="nav-item dropdown"> <a class="nav-link dropdown- toggle" href="#" role="button" data-bs- toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Link</a></li> <li><a class="dropdown-item" href="#">Another link</a></li> <li><a class="dropdown-item" href="#">A third link</a></li> </ul> </li>
  • 40.
    Navbar Forms andButtons <nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="javascript:void(0)">Logo</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data- bs-target="#mynavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="navbar-nav me-auto"> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)">Link</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="text" placeholder="Search"> <button class="btn btn-primary" type="button">Search</button> </form> </div> </div> </nav>
  • 41.
    Fixed Navigation Bar <navclass="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>