Bootstrap
From Script | Spoken-Tutorial
Revision as of 17:06, 6 October 2021 by Nirmala Venkat (Talk | contribs)
Bootstrap is a free and open source front end development framework for the creation of websites and web apps.
It includes CSS and HTML based predefined design templates and classes for forms, tables, navigations etc. and optional JavaScript plugins. It is easy to use as only basic knowledge of HTML and CSS are required. It creates responsive web pages which automatically adjust as per screen size from small screen mobiles to large screen desktops. Mobile-First approach is the part of core framework. It is compatible with all the modern browsers.
The Spoken Tutorial effort for Bootstrap has been contributed by Neha Solanki with the support from Nancy Varkey and Nirmala Venkat from Spoken Tutorial team.
The domain review is done by Ankita Maske from Spoken Tutorial team.
Learners: Web designers, Web developers, Higher Secondary and UG Students.
Contents
Basic Level
- Introduction to Bootstrap
- Download Bootstrap version 4.6.0 from https://getbootstrap.com/
- Download the ready-to-use compiled code for Bootstrap
- About ready-to-use compiled code for Bootstrap files
- Demonstration on how to include Bootstrap class in HTML file
- Linking bootstrap.css file to HTML file
- Observe output on web browser
- About bootstrap.css file
- About Bootstrap from CDN link
- Demonstration on how to include Bootstrap version 4.6.0 from CDN link
- Create a web page with Bootstrap using CDN link
- Containers in Bootstrap
- What are containers?
- Add .container class to the HTML file
- How to set responsive design mode?
- What are breakpoints?
- How to set screen size to Extra Large?
- Observe the width of the container in responsive design mode
- Add .container-fluid class to the HTML file
- Observe the width of the container-fluid in responsive design mode
- Add .container-md class to the HTML file
- Observe the width of the container-md in responsive design mode
- Grid System in Bootstrap
- About grid system
- How to add .row class to the HTML file?
- How to add .col and .col-auto classes to the HTML file?
- About Column Class with Breakpoints
- How to add .col-3 and .col-9 columns classes to the HTML file
- How to create unequal width columns using a 12 column class?
- What happens if the sum of no. columns is greater than 12?
- What are 12 Column Class with Breakpoints?
- How to add .col-md-3 and .col-md-9 columns classes to the HTML file
- Observe the width of the columns in responsive design mode
- Order and Offset Classes in Bootstrap
- About order classes
- Different types of order classes
- About order classes with Breakpoints
- How to add .order-sm-last, .order-3, .order-2 and .order-1 classes to the HTML file?
- Observe the changes in columns in responsive design mode
- About offset classes
- Different type of offset classes
- How to add .offset-1 class to the HTML file?
- About offset classes with Breakpoints
- How to add .offset-sm-1 class to the HTML file?
- Observe the changes in columns in responsive design mode
- Margin and Padding Classes in Bootstrap
- Format for naming the margin and padding classes
- How to add .m-4 class for margin to the HTML file?
- Observe the margin in columns in responsive design mode
- To check how much margin is added
- How to horizontally center the block-level element by using .mx-auto class?
- How to add .pt-5 class for padding to the HTML file?
- Observe the padding in columns in responsive design mode
- To check how much padding is added
- Formats for naming margin and padding classes with Breakpoints
- How to add .pt-sm-5 class for padding to the HTML file?
- Observe the padding in columns in responsive design mode
- Horizontal and Vertical Alignment Classes in Bootstrap
- Different types of justify-content classes for horizontal alignment
- Add .justify-content-between class to the HTML file
- Observe the horizontal alignment of the columns on the web browser
- Different types of align-items classes for vertical alignment
- Add .align-items-end class to the HTML file
- Observe the vertical alignment of the columns on the web browser
- How to apply different vertical alignment for different columns?
- Different types of align-self classes for vertical alignment
- Add .align-items-end and .align-items-start classes to the HTML file
- Observe different vertical alignment of the columns on the web browser
- Typography in Bootstrap
- Different types of text alignment and text transform classes
- Add .text-center class and .text-uppercase class to the HTML file
- Different types of font weight classes
- Add .font-weight-bold class to the HTML file
- What is the use of .font-italic, .text-decoration-none and .text-reset classes?
- Add .font-italic class and text-decoration-none class to the HTML file
- Add .text-reset class to the HTML file
- Different types of display heading classes
- Add .display-4 class to the HTML file
- Observe the output by adding all the classes one by one on the web browser
- Color Classes in Bootstrap
- Different types of Border Color Classes
- Add .border-primary class to the borders in HTML file
- Observe the border color on the web browser
- Different types of Text Color Classes
- Add .text-danger class to the text in HTML file
- Add .text-danger class to the links in HTML file
- Observe the text and links color on the web browser
- Different types of Background Color Classes
- Add .bg-light, .bg-info, .bg-secondary class to the rows and columns in HTML file
- Observe the background colors on the web browser
