Bootstrap Tutorial: Containers, Grids, and Components

Unit I Bootstrap 10 Hours Containers – Grid System – Display Widths – Advanced Grid Techniques: Row Columns – Vertical Alignment – Horizontal Alignment – Nesting – Collapse and Expand – Navigation Bar– Buttons – Tables – Labels and Badges – Tabs – Alerts – Progress Bar – Cards – Carousels– Forms. Bootstrap Introduction Bootstrap is a powerful, feature-packed frontend toolkit What is 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 is a set of CSS and JavaScript code in order to quickly have a website or web application that is responsive with a mobile-first design approach What is Responsive Web Design? Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops Simple code base <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> </head> <body> <h1>Hello, world!</h1> </body> </html> Explanation 1. <meta> tag defines metadata about an HTML document. Always placed inside <head> tag Metadata will not be displayed on the page, but is machine parsable. 2. <meta charset="UTF-8"> To display an HTML page correctly, a web browser must know which character set to use. UTF-8 covers almost all of the characters and symbols in the world! – HTML5 encourages to use UTF-8 charset 3. <meta name="viewport" content="width=device-width, initial-scale=1.0">   Viewport is the user's visible area of a web page (web content can be seen) Viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.  Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.  After using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.  Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries < meta name="viewport"> tag  With the help of above tag web designers took control of the view port  Gives browser instructions on how to control the page's dimensions and scaling width=device-width - sets width of the page to follow the screen-width of the device initial-scale=1.0 - sets initial zoom level when the page is first loaded by the browser Without the viewport meta tag With the viewport meta tag How to include Bootstrap? Two ways to start using Bootstrap 1. Download Bootstrap from getbootstrap.com 2. Include Bootstrap from a CDN Include Bootstrap from a CDN 1. Create a new index.html file in your project root. Include the <meta name="viewport"> tag as well for proper responsive behavior in mobile devices. 2. Include Bootstrap’s CSS and JS. Place the <link> tag in the <head> for our CSS, and the <script> tag for our JavaScript bundle before the closing </body>. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.m in.css" rel="stylesheet" integrity="sha384QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bun dle.min.js" integrity="sha384YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> Both bootstrap.bundle.js and bootstrap.bundle.min.js include Popper for tooltips and popovers If we are using separate script solutions, include poppers first and then javascript plugins <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> Starter Template <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1>   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min .js" integrity="sha384MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>  <!-<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> --> </body> </html> Breakpoint Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap Available breakpoints Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively Breakpoint X-Small Small Medium Class infix None sm md Dimensions <576px ≥576px ≥768px Breakpoint Large Extra large Extra extra large Class infix lg xl xxl Dimensions ≥992px ≥1200px ≥1400px Containers Bootstrap 5 requires a containing element to wrap site contents. Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport Containers are the most basic layout element in Bootstrap and are required when using our default grid system. While containers can be nested, most layouts do not require a nested container. Bootstrap comes with three different containers    .container, which sets a max-width at each responsive breakpoint .container-fluid, which is width: 100% at all breakpoints .container-{breakpoint}, which is width: 100% until the specified breakpoint .container .containersm .containermd .container-lg .container-xl .containerxxl .containerfluid Extra small Small <576px ≥576px 100% 540px Medium ≥768px 720px Large ≥992px 960px X-Large ≥1200px 1140px XX-Large ≥1400px 1320px 100% 540px 720px 960px 1140px 1320px 100% 100% 720px 960px 1140px 1320px 100% 100% 100% 100% 100% 100% 960px 100% 1140px 1140px 1320px 1320px 100% 100% 100% 100% 100% 1320px 100% 100% 100% 100% 100% 100% Max-width Defines the maximum width an element can have. The element can occupy as much width as possible up to the max-width after which it expands its height in order to fit the content. Fixed Container     Use the .container class to create a responsive, fixed-width container. Its width (max-width) will change on different screen sizes It is placed in the center of the body section of the html page. Have left and right margins and are not of fixed width. Will change depending on the viewport width <div class="container"> <h1>Bootstrap Page</h1> <p>Sample text to demonstrate bootstrap container</p> </div> Fluid Container Use the .container-fluid class to create a full width container that will always span the entire width of the screen (width is always 100%): <div class="container-fluid"> <h1>Bootstrap Page</h1> <p>Sample text to demonstrate bootstrap container</p> </div> Responsive containers   Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply max-widths for each of the higher breakpoints. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will scale up with md, lg, xl, and xxl. o o o o o <div class="container-sm">100% wide until small breakpoint</div> <div class="container-md">100% wide until medium breakpoint</div> <div class="container-lg">100% wide until large breakpoint</div> <div class="container-xl">100% wide until extra large breakpoint</div> <div class="container-xxl">100% wide until extra extra large breakpoint</div> Container Padding By default, containers have left and right padding, with no top or bottom padding use spacing utilities, such as extra padding and margins to make them look even better <div class="container pt-5"></div> pt-5 padding top=5 py-5 padding y axis=5  spacing the top and bottom sides simultaneously "py" and "px" for vertical and horizontal padding Border, Color, Margin for Containers Container fluid does not have any space on the page. We need to use margin for any side <div class="container m-5 border"> <h1>Bootstrap Page</h1> <p>This part is inside a .container class.</p> <p>The .container class provides a responsive fixed width container.</p> </div> <div class="container my-5 border"> <h1>Bootstrap Page</h1> <p>This part is inside a .container class.</p> <p>The .container class provides a responsive fixed width container.</p> </div> Sass Bootstrap generates a series of predefined container classes to build the desired layouts. We can customize these predefined container classes by modifying the Sass map found in _variables.scss $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px ); Create our own containers with our Sass mixin // Source mixin @mixin make-container($padding-x: $container-padding-x) { width: 100%; padding-right: $padding-x; padding-left: $padding-x; margin-right: auto; margin-left: auto; } // Usage .custom-container { @include make-container(); } Bootstrap 5 Grid     Bootstrap grid is the mobile-first flexbox grid to build layouts of all shapes and sizes Supports up to 12 columns across the page We can combine them to make wider columns The grid system is responsive, and the columns will re-arrange themselves automatically based on screen size. It is not necessary to use all 12 available columns. Make sure the total is less than or equal to 12 Flexbox: The flexible box layout module (usually referred to as flexbox) is a one-dimensional layout model for distributing space between items and includes numerous alignment capabilities The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space. Grid is used to accommodate to all kind of display devices and screen sizes Grid Classes Required base classes   .row: This class is used to create the row grid and used in the parent class .col: This class is used to create a grid/column and this class is used inside of the .row class The Bootstrap 5 grid system has six 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) Different Display widths Bootstrap allows using different classes for grid layout according to different display widths the web page will be displayed on. Example col-sm-2 and col-lg-2 -> both occupy 2 columns col-sm-2 – occupy 2 columns for any display area width >=576px. col-lg-2 - occupy 2 columns for display area width >=768px For display areas smaller than the prescribed value, it will stack one column above the other, occupying the whole 12-column width Example 1.1 <div class="row"> <div class="col-sm-2"> <div class="col-sm-2"> <div class="col-sm-2"> <div class="col-sm-2"> <div class="col-sm-2"> <div class="col-sm-2"> </div> 1 2 3 4 5 6 </div> </div> </div> </div> </div> </div> If we need the following modification to the previous example, For small devices – have 6 columns For extra small devices - 2 columns per row instead of 1 column per row We need to apply multiple classes of different breakpoints to the same div Example 1 <div class="row"> <div class="col-sm-2"> <div class="col-sm-2"> <div class="col-sm-2"> <div class="col-sm-2"> <div class="col-6 col-sm-2"> <div class="col-6 col-sm-2"> </div> 1 2 3 4 5 6 </div> </div> </div> </div> </div> </div> 1 2 3 4 5 6 </div> </div> </div> </div> </div> </div> Example 2 <div class="row"> <div class="col-sm-2 col-6"> <div class="col-sm-2 col-6"> <div class="col-sm-2 col-6"> <div class="col-sm-2 col-6"> <div class="col-6 col-sm-2"> <div class="col-6 col-sm-2"> </div> If we enlarge the display area to have a width greater than or equal to 576px, we can have 6 columns per row Example 3 Mix and match a. For extrasmall devices, 2 columns per row b. For small devices, 3 columns per row c. For medium or wider devices, 6 columns per row Auto-layout columns - To create easy column sizes without an explicit numbered class like .col- 6, use breakpoint-specific column classes Equal-width- to create the grid in equal sizes Example - to create three equal-width columns, on all devices and screen widths <div class="container border"> <div class="row"> <div class="col"> Column <div class="col"> Column <div class="col"> Column </div> </div> </div> </div> </div> These columns are centered in the page with the parent .container <div class="container"> <div class="row bg-success"> <div class="col border" > Column </div> <div class="col border"> Column </div> <div class="col border"> Column </div> </div> <div class="row"> <div class="col border"> 1 of 2 </div> <div class="col border"> 2 of 2 </div> </div> Setting one column width  We can set the width of one column and have the sibling columns automatically resize around it. Width can be applied to any column  Use predefined grid classes, grid mixins, or inline widths Below example shows how setting only the center column’s width leads the other columns to resize themselves accordingly <div class="container"> <div class="row"> <div class="col border"> <div class="col-6 border"> <div class="col border"> </div> <div class="row"> <div class="col border"> <div class="col-5 border"> <div class="col border"> </div> </div> 1 of 3 2 of 3 (wider) 3 of 3 </div> </div> </div> 1 of 3 2 of 3 (wider) 3 of 3 </div> </div> </div> Variable width content   Use col-{breakpoint}-auto classes to size columns based on the natural width of their content. In this setting, we can add responsiveness by which we can specify the screen size above which that column will have variable width with content. <div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2 border"> 1 of 3 </div> <div class="col-md-auto border"> Variable width content </div> <div class="col col-lg-2 border"> </div> <div class="row"> <div class="col border"> 1 of 3 <div class="col-md-auto border"> content </div> <div class="col col-lg-2 border"> </div> </div> 3 of 3 </div> </div> Variable width 3 of 3 </div> <div class="row justify-content-md-center"> All Breakpoints - For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes Specify a numbered class when you need a particularly sized column <div class="row"> <div class="col-8 border">col-8</div> <div class="col-4 border">col-4</div> </div> Advanced Grid Techniques: Row columns Row columns – help to define columns of row by using them at row div and not col div    Responsive .row-cols-* classes to quickly set the number of columns that best render your content and layout Whereas normal .col-* classes apply to the individual columns (e.g., .col-md-4), the row columns classes are set on the parent .row as a default for contained columns. With .row-cols-auto you can give the columns their natural width. <div class="row row-cols-2"> (2 - indicates number of columns required) <div class="col border">Column</div> <div class="col border">Column</div> <div class="col border">Column</div> <div class="col border">Column</div> </div> 2-column layout 6-column layout <div class="row row-cols-auto"> <div class="col border">Column</div> <div class="col border">Column</div> <div class="col border">Column</div> <div class="col border">Column</div> </div> <div class="row row-cols-4"> <div class="col border">Column</div> <div class="col border">Column</div> <div class="col-6 border">Column</div> <div class="col border">Column</div> </div> Example- 3 col for medium and 6 for large Small devices Large devices i) Using row-col-* <div class="row row-cols-3 row-cols-lg-6"> <div class="col"> 1 <div class="col"> 2 <div class="col"> 3 <div class="col"> 4 <div class="col"> 5 <div class="col"> 6 </div> ii) Using col-* <div class="row"> <div class="col-4 col-lg-2"> <div class="col-4 col-lg-2"> <div class="col-4 col-lg-2"> <div class="col-4 col-lg-2"> </div> </div> </div> </div> </div> </div> 1 2 3 4 </div> </div> </div> </div> <div class="col-4 col-lg-2"> <div class="col-4 col-lg-2"> </div> Difference between col-* and row-col-* Col-* While using classes to specify the column width at column div level, we need to specify the number of columns, our column will occupy Usage- To have columns with different widths within the same row Example: Use col-3 if we want the columns to be 3 columns wide 5 6 </div> </div> Row-col-* While using classes at row div level, we need to specify the number of columns I want in the row. Bootstrap will automatically calculate the width of each column Usage- To set width for all columns of a row Example: row-col-3 creates 3 columns in a row Vertical Alignment Bootstrap allows aligning things inside the row itself in a vertical axis   Middle Alignment Top and Bottom Alignment Middle Alignment – use the class align-items-center in the row div tag <div class="row align-items-center"> <div class="col"> 1 <div class="col"> 2 <div class="col"> 3 </div> </div> </div> </div> Top and Bottom Alignment Apply align-items-start and align-items-end at row div level <div class="row align-items-start"> <div class="col"> 1-start <div class="col"> 2-start <div class="col"> 3-start </div> <div class="row align-items-center"> </div> </div> </div> <div class="col"> <div class="col"> <div class="col"> </div> <div class="row align-items-end"> <div class="col"> <div class="col"> <div class="col"> </div> 1-center 2-center 3-center 1-end 2-end 3-end </div> </div> </div> </div> </div> </div> Different Vertical Alignments within the same row Use special classes align-self-start, align-self-center and align-self-end at col level Horizontal Alignment Deals with aligning columns in the horizontal direction which is more useful when you have content that does not occupy the whole width of the page Left Alignment So far we had content left to right occupying the whole container width. In some cases we need to have part of the width occupied. Example: Need to have content on the first 2 columns and rest of the horizontal space to be empty. Use justify-content-start <div class="container"> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> </div> <div class="row justify-content-start"> <div class="col-2 col"> 2-columns-width </div> </div> <div class="row justify-content-start"> <div class="col-3 col"> 3-columns-width </div> </div> </div> Center and Right Alignment Use classes justify-content-center and justify-content-end <div class="container"> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> </div> <div class="row justify-content-start row-1"> <div class="col-2 col"> 2-columns-width </div> </div> <div class="row justify-content-start row-2"> <div class="col-3 col"> 3-columns-width </div> </div> Space Between If you want 3 content columns to be aligned horizontally such that they have equal space between them – Use justify-content-between <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> </div> <div class="row justify-content-between"> <div class="col-2"> 2-columns, left </div> <div class="col-2"> 2-columns, middle </div> <div class="col-2"> 2-columns, right </div> </div> Space Around To include space around the content, use justify-content-around at row div level <div class="row justify-content-around"> <div class="col-2"> 2-columns, left <div class="col-2"> 2-columns, middle <div class="col-2"> 2-columns, right </div> </div> </div> </div> Nesting    Nesting a grid within another is allowed and follows the same rules that apply to the root grid For nesting, we need to use a row div and child col divs inside patent col div Nested rows should include a set of columns that add up to 12 or fewer <div class="row"> <div class="col-sm-3 border"> Level 1: .col-sm-3 </div> <div class="col-sm-9 border bg-primary"> <div class="row"> <div class="col-8 col-sm-6 border"> Level 2: .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6 border"> Level 2: .col-4 .col-sm-6 </div> </div> </div> </div> Navigation Bar A navigation bar is a navigation header that is placed at the top of the page <nav> <ul> <li ><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> To remove the bullets, add nav class to the <ul> tag that holds the menu options <nav> <ul class="nav"> <li ><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> Menu items are arranged one exactly next to the other. To have some space around the menu items, add the class “nav-item” on <li> elements and the class “nav-link” on anchor a elements <nav> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </nav> Collapse and Expand In order for the list of menu items to be collapsible, we need a special class on the nav element (navbar-expand-lg) and need to wrap the collapsible/expandable content into a div with special class So that the menu items will be replaced with a hamburger icon on small devices and when clicked, would enlist the menu options We need to perform the below steps for collapse and expand 1. Adding the class navbar-expand-lg on the nav element - instructs the browser to expand the content at the lg breakpoint (for displays greater than or equal to 992px) 2. Wrapping ul elements into a div element with classes collapse and navbar-collapse to make the browser know which content needs to be collapsed and expanded If we expand the browser to 992px, menu options will be appeared Brand link The link with the text Brand link is not hidden when the page shrinks to mobile size. It is always visible and supposed to be a link that takes the user to the home page of site. <nav class="navbar-expand-lg"> <a href="#">Brand link</a> <div class="collapse navbar-collapse"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </nav> Make the brand link stand out To make the brand link to display at the same level of menu options and to stand out a little bit, 1. Add class “navbar” to the nav wrapping element 2. Add class “navbar-brand” to the anchor element <nav class="navbar navbar-expand-lg"> <a class="navbar-brand" href="#">Brand Link</a> <div class="collapse navbar-collapse"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </nav> Add some color to Nav Bar 1. Use one of the navbar-dark or navbar-light classes at the nav element. 2. Combine it with a background color utility class. <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">My Page</a> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </nav> On hovering over the link, text will be highlighted. Ex: contact link is highlighted Adding the Button to Unfold Menu Options on Small Devices Let’s add a button that when clicked, unfold the menu options on small devices <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">My Page</a> <button type="button"> </button> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </nav> We have added the button as a sibling of the brand anchor, but after it. Making the Button Appear Only on Small Devices We want the button to appear only on the small devices with width below the expanded breakpoint that is set on the nav bar In this example, the breakpoint that we have set is lg, which means that you want the button to appear for displays with width <992px Add the class navbar-toggler to achieve the above effect <button type="button" class="navbar-toggler"> </button> Toggle Button Creating the Hamburger Icon    The button does not look good on small devices, and this is because it does not have actual content inside. In order to create the visual icon of the hamburger, Bootstrap gives you the class navbar-toggler-icon. You need to apply that on a span element inside the button element. <button type="button" class="navbar-toggler"> <span class="navbar-toggler-icon"></span> </button> Adding Behavior to the Button When the button is clicked, the menu options should unfold. We can do that by adding two data* attributes to the button element 1. data-toggle="collapse", which tells Bootstrap that this button is used to collapse/unfold a specific area of the HTML document 2. data-target="#navbar", which tells Bootstrap that the specific area that needs to be collapsed/unfolded is the one that is selected with the CSS selector #navbar. <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">My Page</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </nav>   Fixed-top on nav element will fix the position of the navigation bar at the top of the page. Add the class active to the first menu item, to indicate that you are on the page Adding the Main Content Add the below div with container below nav tag <div class="container"> <h1>Bootstrap</h1> <p>My first web page using bootstrap</p> </div> <h1> tag is hidden behind the nav bar. To solve this pblm, add customized top padding body { padding-top: 56px; } <link rel="stylesheet" href="stylesheets/main.css" type="text/css"> Padding = 8+40+8=56 Lead Make a paragraph stand out by adding .lead <p class="lead"> To Align Nav Bar Content with Page Main Content, wrap nav bar with container <!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="bootstrap.min.css">  <link rel="stylesheet" href="stylesheets/main.css" type="text/css"> <title>Listing 3-15</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand" href="#">My Page</a> <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bstarget="#navbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> <div class="container"> <h1>Bootstrap</h1> <p class="lead">My first web page using bootstrap</p> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script > </body> </html> Buttons 1. All buttons should have the class btn 2. Then, you can apply one class that deals with the color of the button a. btn-default b. btn-primary c. btn-secondary d. btn-success e. btn-danger f. btn-warning g. btn-info h. btn-light i. btn-dark 3. Instead of a color, you can also apply a class to turn a button into a link: btn-link. 4. Or you can interpolate the *-outline-* word in the class name in order to style a transparent background color button with a border, for example, btn-outline-primary. 5. Then you can specify the size of the button using a corresponding class: a. btn-lg for large buttons. b. Specify no class for normal-size buttons. c. btn-sm for small buttons. d. btn-block for blocks that span the whole available width. <button type="button" class="btn btn-sm btn-primary">btn btn-sm btnprimary</button> <button type="button" class="btn btn-block btn-link">btn btn-block btnlink</button> <button type="button" class="btn btn-outline-dark">btn btn-outlinedark</button> Tables Simple HTML Table without extra styling and bootstrap classes <table> <tr><th colspan="2">Shopping List</th></tr> <tr><th>Item</th><th>Qt</th></tr> <tr><td>Cheese</td><td>1 kgr</td></tr> <tr><td>Rice</td><td>1.5 kgr</td></tr> </table> Styling Bootstrap Tables Apply the class table on the table elements. <table class="table"> Striped and Bordered tables <table class="table table-striped"> <table class="table table-bordered"> <table class="table table-hover"> - on hovering over the rows, the rows will be highlighted <table class="table table-striped table-bordered table-sm"> table-sm - will make sure that the rows have quite small height Coloring Table Rows Twitter Bootstrap offers a series of semantic classes that correspond to specific colors. On applying we can quickly set the background color of the corresponding row (tr) or the corresponding cell (td or th). 1. table-active 2. table-primary 3. table-secondary 4. table-success 5. table-danger 6. table-warning 7. table-info 8. table-light 9. table-dark <table class="table table-bordered table-striped table-sm"> <tr><th colspan="2">Travel Plan</th></tr> <tr class="table-active"><th>(active) Action</th><th>Due</th></tr> <tr class="table-info"><td>(info) Book Hotel</td><td>March 26th</td></tr> </table> Labels and Badges Labels – To create some kind of visual label, a tag, we need to enclose the content inside a span element and apply the class badge plus one class for the color of label (badge-*) 1. badge-primary 2. badge-secondary 3. badge-success 4. badge-danger 5. badge-warning 6. badge-info 7. badge-light 8. badge-dark <span class="badge badge-primary">€20.00 - Primary</span> <span class="badge badge-secondary">€20.00 - Secondary</span> Badges Sometimes we want to display a small, or larger, badge, like a number inside a circle, for example, to indicate the number of unread messages, as in figure To achieve this by adding the class badge-pill alongside the other badge-* classes <button class="btn btn-light">Inbox <span class="badge badge-light badgepill">7</span></button> <button class="btn btn-light">Inbox <span class="badge badge-dark badgepill">8</span></button> Tabs Sometimes you want to organize the information on your page using tabs.    The tabs will group parts of the information under a title and they do not display all the information at the same time The user selects which information group to see/read by clicking the corresponding tab header There are two parts in the HTML implementation of a tabs feature: o The tab headers o The different contents with the actual information The Tab Headers   tab headers are an unsorted list ul with class nav nav-tabs Each element in the list (li) corresponds to a tab header, and it has to have the class nav-item  The content of each li is an anchor with class nav-link and the data attribute datatoggle with value tab  Also, each anchor has an href value pointing to the corresponding information container.  When this anchor is clicked, that information container is going to be displayed to the user  The li corresponding to the information container that should be displayed to the user needs to have the class active too. <ul class="nav nav-tabs"> <li class="nav-item"><a class="nav-link active" href="#dashboard" datatoggle="tab">Dashboard</a></li> <li class="nav-item"><a class="nav-link" href="#payments" datatoggle="tab">Payments</a></li> <li class="nav-item"><a class="nav-link" href="#invoices" datatoggle="tab">Invoices</a></li> <li class="nav-item"><a class="nav-link" href="#settings" datatoggle="tab">Settings</a></li> </ul> Tab without contents Tab with contents <div class="container"> <h1>Tabs</h1> <hr class="my-4"> <ul class="nav nav-tabs mb-4"> <li class="nav-item"><a class="nav-link active" href="#dashboard" data-toggle="tab">Dashboard</a></li> <li class="nav-item"><a class="nav-link" href="#payments" datatoggle="tab">Payments</a></li> <li class="nav-item"><a class="nav-link" href="#invoices" datatoggle="tab">Invoices</a></li> <li class="nav-item"><a class="nav-link" href="#settings" datatoggle="tab">Settings</a></li> </ul> <div class="tab-content"> <div id="dashboard" class="tab-pane active"> <p> <strong>Dashboard:</strong> Tab 1 contents </p> </div> <div id="payments" class="tab-pane"> <p> <strong>Payments:</strong> Tab 2 contents </div> </p> <div id="invoices" class="tab-pane"> <p> <strong>Invoices:</strong> Tab 3 contents </div> </p> <div id="settings" class="tab-pane"> <p> <strong>Settings:</strong> Tab 4 contents </p> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min .js"></script> 1. You have a div that contains all the other individual divs. 2. This parent div has class tab-content. 3. Each div has id value equal to the href of the corresponding tab header anchor. 4. Each div has the class tab-pane. 5. The first div has the class active too, because this is the first information box that is displayed for the first tab header, which is also, initially, active. mb-3 to the ul element Alerts  Sometimes we want to display messages that will attract user attention. These are called alerts.  These messages are usually displayed at the top of the page, but not necessarily only there.  Class alert that should be used on a block element like div in order to turn it into an alert block  In addition, we can use alert-color classes along with alert class to add color to the messahe  The color classes related to alerts are 1. alert-primary 2. alert-secondary 3. alert-success 4. alert-danger 5. alert-warning 6. alert-info 7. alert-light 8. alert-dark <h1>Alerts</h1> <hr class="my-4"> <div class="alert alert-primary"> A simple primary alert. </div> <div class="alert alert-secondary"> A simple secondary alert. </div> Inside your alert, you can have any valid HTML content. For example, you can have a link to another page <div class="alert alert-info"> <strong>London</strong> Read more about London from <a class="alert-link" href="https://en.wikipedia.org/wiki/London">Wikipedia London Link</a>. </div> <div class="alert alert-info"> <strong>London</strong> Read more about London from <a class="alert-link" href="https://en.wikipedia.org/wiki/London">Wikipedia London Link</a>. </div> Progress Bars Progress bars indicate how much of a given task has been completed and how much remains to be done. In the above figure, the progress bar has both a color and a text indication for task completion status Bootstrap has two classes that are related to this tool, the progress and the progress-bar <div class="progress"> <div class="progress-bar" style="width: 60%;">60% Complete</div> </div>     The child div has the text that is displayed to give a textual info about the current progress. The size of width attribute is important as it indicates the actual progress. Good approach is to use a percentage here, because the percentage will make the child width be a percentage of the width of the parent div The progress class on the parent div makes sure that the parent div occupies all the available width of the page, whereas the style="width: 60%" on the child div makes sure that the child div occupies exactly 60% of the parent div, hence these two div elements working as one to give the visual effect of the progress bar Progress Bar Height We can adjust the height of the parent div, the one that has the class progress <div class="progress" style="height: 1.8rem;"> <div class="progress-bar" style="width: 60%;">60% complete</div> </div> Progress Bar Colors We can use the Bootstrap background color utility classes to change the color of the progress bar These classes are • bg-primary • bg-secondary • bg-success • bg-danger • bg-warning • bg-info • bg-light • bg-dark Need to set this class on the inner div, alongside the progress-bar class <div class="progress mb-1 h-4"> <div class="progress-bar bg-primary" style="width: 60%;">60% Complete primary</div> </div> Multicolored Progress Bar   We can use different colors on the same progress bar This can be achieved by including more than one child div with the progress-bar class. <div class="progress my-4 h-4"> <div class="progress-bar bg-primary" style="width: 30%;">30% primary</div> <div class="progress-bar bg-success" style="width: 50%;">50% success</div> <div class="progress-bar bg-warning" style="width: 10%;">10% warning</div> </div> Cards A card is a container that has some specific structure to create very attractive content, with headers and footers. A card usually has an image, a title, and a body. But it can also contain headers and footers <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3"> <div class="col"> <div class="card"> <h5 class="card-header">Voted #1</h5> <img src="https://live.staticflickr.com/3869/14437071224_43fb23705b_h.jpg" class="card-img-top" alt="lion sitting and looking around" style="height: 220px"/> <div class="card-body"> <h5 class="card-title">Lions</h5> <h6 class="card-subtitle">Lions Are Amazing</h6> <p class="card-text"> The lion (Panthera leo) is a large mammal of the Felidae (cat) family </p> <a href="https://simple.wikipedia.org/wiki/Lion" class="btn btn-primary">Learn more</a> </div> <div class="card-footer"> from Wikipedia </div> </div> </div> <div class="col"></div> </div>   row-cols-* are the ones needed in order to lay out one or two or three columns on the desired breakpoints Then each card is being enclosed inside a col div: <div class="col"> The HTML of Each Card       The whole card is enclosed inside a div with the class card. Each card has a header, which is an h* element with class card-header. The image is constructed with a standard img element that has the class card-img-top. You can also give a specific height so that all the images of all the cards are displayed on a specific height, but taking all the available width. Then, the main content of the card, the one that follows the image, is put inside a div with class card-body. Inside the body, you can generally put any HTML code that you want. We have put  A card title using an h* and a class card-title.  A card subtitle using an h* and a class card-subtitle.  A paragraph with the main text. This has the class card-text.  A hyperlink with class card-link and some extra classes to make it look like a button. After the body, we attach a div with the class card-footer. This is used to create the footer of the card. Carousels • We can create image and video carousels using bootstrap • Carousels are areas of the page that display a series of images (and/or videos) one by one. • Each image stays visible for a while (about 5 seconds) before being replaced by the next one. • A typical carousel is composed of the following: 1. Small indicators usually displayed at the bottom  The number of indicators is equal to the number of items in the carousel. In the preceding example, there is a carousel with three items. Hence, we can see three bars.  The one that is filled with white color indicates which item is currently displayed.  We can also click a bar to quickly display the item at the corresponding position. 2. Next and previous controls Next and previous buttons, like arrows, allows to navigate, slide, from item to item, in either direction, left or right 3. The items The carousel has a list of items, each one referencing an image and having a title. HTML Code <div class="container"> <div class="page-header"> <h1>Carousels</h1> </div> <div id="carouselExample" class="carousel slide carousel-fade" data-bs-ride="carousel">  <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" arialabel="Slide 2"></button> <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" arialabel="Slide 3"></button> </div>  <div class="carousel-inner"> <div class="carousel-item active"> <img src="img1.jpg" alt="..." class="d-block w-100" style="height:500px;"> </div> <div class="carousel-item"> <img src="img2.jpg" alt="..." class="d-block w-100" style="height:500px;"> </div> <div class="carousel-item"> <img src="img4.jpg" alt="..." class="d-block w-100" style="height:500px;"> </div> </div>  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"> </script> HTML Code Explanation 1. The carousel needs to be enclosed inside a div with classes carousel and slide. If we need face effect while transition from one slide to the next, then add the class carousel-fade too. 2. The main div needs to have an id. This is necessary because it is then referenced by the indicators and the controls. 3. For the indicators a. Create a div with class carousel-indicators b. Each button is an indicator, and we can have as many indicators as the number of your items. c. Each indicator needs to have a data-bs-target attribute with the id of the carousel. Also, it needs to have a data-bs-slide-to attribute with value equal to the index/position of the item it corresponds to. Note that indexing/ positioning starts from 0. That is, the first carousel item is referenced with index 0, then the second with index 1, and so on. d. The first indicator needs to have the class active. 4. All the carousel items need to be wrapped in a single div with class carousel-inner. 5. For the carousel items a. Each one is a div that has the class carousel-item. b. The first one needs to have the class active; otherwise, the carousel will not be displayed. c. Images of the carousel need to have classes and styles that take care of their height and display attribute. In particular i. Classes d-block and w-100: d-block sets the image display attribute block value. w-100 sets the image width to be 100%. These are display and sizing Bootstrap utility classes. ii. Style that sets the height of all images to be the same. In the example, it is set to 500px. d. Finally, the carousel items can have a div with class carousel-caption that works as the title/caption of the item. Note that you have set two extra display utility classes on the captions: i. d-none, which hides the captions. ii. d-md-block, which displays the captions for medium displays and wider (captions to be displayed on devices with width >=768px. Otherwise, they will not be displayed ) 6. Below the inner content of the carousel (the div with class carousel-inner), set the HTML content for controls, which are two buttons a. The first has the class carousel-control-prev, and it is used to navigate to the previous/left slide. b. The second has the class carousel-control-next, and it is used to navigate to the next/right slide. c. Both have attribute data-bs-target pointing to the carousel id (#carouselexample) d. Both have a child/content that is a span. This span is used to display the left (for the first control) and the right (for the second control) arrows. For the first control, the span needs to have the class carousel-control-previcon, so that it displays the left arrow. For the second control, the span needs to have the class carousel-control-next-icon, so that it displays the right arrow Forms <form> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" placeholder="Enter email" > </div> <div class="mb-3"> <label for="password" class="form-label">Password</label> <input type="password" class="form-control" id="password"> </div> <div class="d-flex justify-content-between align-items-center"> <div class="form-check"> <input type="checkbox" class="form-check-input" id="remember-me-checkbox"> <label class="form-check-label" for="remember-me-checkbox">Remember Me</label> </div> <button class="btn btn-sm btn-primary" type="submit"> <strong>Log in</strong> </button> </div> </form> HTML Explanation 1. Class form-group - adds a bottom margin of value 1rem 2. Class form-check - used for the input and label that have to do with the checkbox. this class applies a left padding of value 1.25rem 3. Class form-control – Need to be attached to the input elements. It takes care of width, height, color, background color, borders, and other styling properties. a. No need to use form-control for checkbox. These are completely different visualwise so form-check-input can be used. Since you are putting the input inside a div with the class form-check, it is absolutely positioned relative to that div. 4. Class form-label – added to each label element to ensure correct padding. a. Checkboxes have different markup and labels have a class form-check-label. It eliminates the bottom margin 5. Class d-flex that is attached on the div that contains the checkbox and the login button turns the div into a flexbox container. This means that it lays out its elements in a row direction. 6. Class justify-content-between takes the two child elements of the flexbox div and aligns them in the row direction so that they have blank space in between. 7. Class align-items-center aligns the children of a flex div but on the non-main axis direction Horizontal Forms    The previous form had one row for the label and a separate row, below the label, for the input control The alternative here to implement a horizontal form This form has the label and the input control on the same row, occupying adjacent columns <div class="row"> <div class="col-12 col-lg-6"> <h3>Sign In</h3> <p>Sign in today for better experience.</p> <form> <div class="form-group row"> <label class="col-lg-2 col-form-label" for="email2">Email</label> <div class="col-lg-10"> <input type="email" placeholder="Email" class="form-control" id="email2" disabled> <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> </div> </div> <div class="form-group row"> <label class="col-lg-2 col-form-label" for="password2">Password</label> <div class="col-lg-10"> <input type="password" placeholder="Password" class="form-control" id="password2"> </div> </div> <div class="form-group row justify-content-end"> <div class="col-lg-10"> <div class="form-check"> <input type="checkbox" class="form-check-input" id="remember-me-checkbox-2"> <label class="form-check-label" for="remember-me-checkbox-2">Remember Me</label> </div> </div> </div> <div class="form-group row justify-content-end"> <div class="col-lg-10"> <button class="btn btn-sm btn-secondary" type="submit">Sign in</button> </div> </div> </form> </div>  </div> </div> disabled Help text

Bootstrap Tutorial: Containers, Grids, and Components

Related documents

Products

Support

Bootstrap Tutorial: Containers, Grids, and Components

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib