Bootstrap Basics

Bootstrap Overview

• Bootstrap is a free front-end framework.
• It facilitates faster and easier web development.
• It is a popular HTML, CSS, and JS framework for developing responsive, mobile-first web projects.
• It provides HTML and CSS design templates for typography, forms, buttons, tables, navigation, modals, image carousels, and optional JavaScript plugins.

Responsive Web Design

• Responsive web design involves creating websites that automatically adjust to look good on all devices.
• Responsive design aims to balance content needs for both mobile and desktop users.
• A desktop site typically has more visual elements like carousels and videos.
• Loading a feature-rich website on a mobile device can increase the page load due to large, scaled-down images and videos.

Alternative Frameworks

• Several frameworks exist for responsive web design including:
• Foundation by Zurb, used by Adobe, Amazon, HP, and eBay.
• Bulma, an open-source CSS framework that does not require jQuery or JavaScript.
• W3.CSS, a standard CSS framework without jQuery or JavaScript.
• Pure.css.

Benefits of Using Bootstrap

• Bootstrap is easy to use, requiring only basic HTML and CSS knowledge.
• It has responsive features adjusting to phones, tablets, and desktops.
• Mobile-first approach is integral to the core framework.
• Bootstrap 5 is compatible with modern browsers like Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera.

Acquiring Bootstrap 5

• There are two methods to start using Bootstrap 5; through a CDN and downloading it from getbootstrap.com.
• A CDN (content delivery network) hosts the Bootstrap framework for linking

Bootstrap 5 Components

• Bootstrap components require JavaScript plugins and Popper for full functionality.
• These components include:
• Alerts for Dismissing
• Buttons for toggling checkbox/radio states
• Collapse for toggling the visibility of content
• Dropdowns for displaying and positioning elements
• Tooltips and popovers for displaying and positioning.

Bootstrap 5 Web Pages

• To create a webpage with Bootstrap 5, add the HTML5 doctype, because Bootstrap 5 is mobile-first, and utilize containers.

HTML5 doctype

• Bootstrap 5 uses HTML elements and CSS properties requiring the HTML5 doctype.
• Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and appropriate character set.

Mobile-First Design

• Bootstrap 5 is designed to be responsive to mobile devices, which are a core feature of the framework.
• To ensure proper rendering and touch zooming, include the viewport meta tag inside the head element: <meta name="viewport" content="width=device-width, initial-scale=1">
• width=device-width sets the page width to match the screen width of the device.
• initial-scale=1 sets the initial zoom level when the page is first loaded.

Bootstrap Containers

• A Bootstrap container is the root element of the Bootstrap 5 grid system.
• It controls the width of the layout, and contains all elements on the page
• The basic HTML page structure should be `

Rows in Bootstrap

• Bootstrap 5 rows divides the screen into horizontal slices.
• Rows should only be used as wrappers for columns.
• Ensure rows are placed inside containers to avoid horizontal scrolling.

Bootstrap 5 Columns

• Columns help divide the screen vertically.
• If a single column is placed in a row, it will take up the entire width.
• If two columns are added, each column will take up 1/2 of the width, and so on for any number of columns.
• Rows are used for containing columns.
• Columns must be children of rows.

Column Sizing

• Column width is set dynamically.
• Depending on the number of columns in a row, each column's width is determined by dividing the container width by the number of columns.
• The Bootstrap grid consists of 12 columns.
• Sizes from 1 to 12 can be selected for your column.
• Three equal columns can be created using col-4 for each, resulting in 3 * 4 = 12.

Bootstrap Grid System

• Bootstrap's grid system divides a page into up to 12 columns.
• If not using all 12 columns individually, columns can be grouped together to create wider columns and allows up to 12 columns across the page.
• Bootstrap's grid system is responsive, rearranging columns depending on the screen size.
• On larger screens, content may look better organized in three columns, whereas a small screen may work better withe content items being stacked

Grid system: Column wrapping

• Bootstrap's grid system supports up to 12 columns across the page.
• If the total column number exceeds 12, extra columns will wrap onto a new line as a single unit.

Problems with Fixed-width Columns.

• Displaying fixed-width columns on mobile devices may cause layout issues.

Column Breakpoints

• A breakpoint is a Bootstrap 5 variable representing screen resolution

• Specifying a breakpoint for a class makes the class active only at resolutions at least as big as the number that breakpoint holds

• The Bootstrap 5 grid system has five classes:

• .col- extra small devices - screen width <576px

  • .col-sm- small devices - screen width >= 576px

• .col-md- medium devices - screen width >= 768px

• .col-lg- large devices - screen width >= 992px

• .col-xl- xlarge devices - screen width >= 1200px

Breakpoint Usage

• To display two columns on the same line on larger screens and stack them vertically on smaller screens, specify the column behavior for col then lg screen sizes

Hiding Elements

• Elements can be hidden using the .d-none class and the .d-{sm,md,lg,xl}-none classes, which hides the elements for different screen sizes.
• To show an element only on a given interval of screen sizes, combine a .d-*-none class with a .d-*-* class. I.e. .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

Text Colors

• Bootstrap 4 has several contextual classes to provide "meaning through colors" for text.
• They include .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), .text-light.

Background Colors

• The classes for background colors include .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, .bg-light.
• Background color classes do not set the text color, so add a .text-* class too.

Basic Table Styling

• The .table class adds basic styling to a table.

Table Variations

• Striped Rows, the .table-striped class adds zebra-stripes to a table.
• Bordered Table, the .table-bordered class adds borders on all sides of the table and cells.
• Hover Rows, the .table-hover class adds a hover effect (grey background color) on the rows.
• Contextual classes can be used to color the whole table (<table>), the table rows (<tr>), or table cells (<td>).

Images

• Images can have Bootstrap 4 Image Shapes using the following classes.
• Rounded Corners class="rounded"
• Circle class="rounded-circle"
• Thumbnail class= "img-thumbnail"

Aligning Images

• Images can be floated to right with the .float-right class or to the left with. float-left:
• Images can be centered by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block)
• Images can be made responsive so they scale nicely to fit the parent element.
• Use .img-fluid class makes the image scale nicely to the parent element

Button Groups

• Button groups & Dropdown Menus can be nested, and are created using the class .btn-group

Badges

• Badges are used to add additional information to any content.
• Use the badge class together with a contextual class like . badge-secondary.
• Use within elements to create rectangular badges
• The badges scale to match the size of the parent element.

Pill Badges

• Use the badge-pill class to make the badges more round.
• .badge-* can be used to change the colour of a badge

This lesson covers fundamental concepts in Bootstrap, including grid systems, responsive design, and mobile-first approaches. It helps users create layouts optimized for various screen sizes. Topics include column behavior, responsive classes, and framework selection.