Difference between revisions of "Bootstrap"
From Script | Spoken-Tutorial
(Created page with " '''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...") |
|||
| Line 106: | Line 106: | ||
#*Add .bg-light, .bg-info, .bg-secondary class to the rows and columns in HTML file | #*Add .bg-light, .bg-info, .bg-secondary class to the rows and columns in HTML file | ||
#*Observe the background colors on the web browser | #*Observe the background colors on the web browser | ||
| + | ==Intermediate Level== | ||
| + | #Forms in Bootstrap | ||
| + | #*Creating various form controls | ||
| + | #*About Input box, select box, read-only plain text, check box and radio buttons | ||
| + | #*Demonstration of the above controls with examples | ||
| + | #*Various Bootstrap classes for designing and styling form elements | ||
| + | #*How to use .form-group class to create a proper form layout? | ||
| + | #*How to use .form-control class for styling? | ||
| + | #*About help text with example | ||
| + | #*About File inputs with example | ||
| + | #*Observe the 2-column layouts form used in laptop and desktop in responsive design mode | ||
| + | #*Observe the single column layout form used for tablets and mobile | ||
| + | #Input Group and Button in Bootstrap | ||
| + | #*About Input group classes with examples | ||
| + | #*About Input Group Sizing | ||
| + | #*Example to change the size of the Input group | ||
| + | #*About Button and Button classes | ||
| + | #*Example to style the button | ||
| + | #*About Outline Button Classes | ||
| + | #*About Disabled State Button with example | ||
| + | #*About Button Size and its classes | ||
| + | #*Demonstration of form layout in laptop and desktop devices | ||
| + | #*Demonstration of form layout in tablets and mobile devices | ||
| + | #Inline Forms in Bootstrap | ||
| + | #*Design two layouts using Bootstrap classes | ||
| + | #*Create Login and Sign up buttons | ||
| + | #*How to use button classes on anchor elements? | ||
| + | #*About .btn-block class | ||
| + | #*Example to show how the .btn-block class is used | ||
| + | #*How to link two html page using button? | ||
| + | #*About .form-inline class | ||
| + | #*Create a login page | ||
| + | #*Example to show how the.form-inline class is used | ||
| + | #*Creation of customised Inline forms | ||
| + | #Nav in Bootstrap | ||
| + | #*Create navigation components | ||
| + | #*About .nav class | ||
| + | #*Create navigation using ul and ol tags | ||
| + | #*Example using <ul and ol tags | ||
| + | #*Create navigation using <nav> tag | ||
| + | #*Example using <nav> tag | ||
| + | #*About horizontal alignment with example | ||
| + | #*About tabs and pills with example | ||
| + | #*About fill and justify with example | ||
| + | #*Display of form layout in laptop and mobile devices | ||
| + | #Navbar in Bootstrap | ||
| + | #*About various navbar components | ||
| + | #*Create a navigation in the navbar | ||
| + | #*Display a logo using navbar-brand class | ||
| + | #*Create components using navbar-nav class | ||
| + | #*About navbar-expand class | ||
| + | #*Create an inline form for search | ||
| + | #*How to create a toggle button using the class .navbar-toggler | ||
| + | #*About collapse.navbar-collapse class | ||
| + | #*Display the navbar in horizontal row for laptop and desktop | ||
| + | #*Display the navbar in collapsed form for mobile and tablets | ||
| + | #Dropdowns in Bootstrap | ||
| + | #*About dropdowns | ||
| + | #*Various characters of dropdowns | ||
| + | #*Displaying lists of options and links using dropdowns | ||
| + | #*About dropdown classes | ||
| + | #*Using the <anchor> tag create a link | ||
| + | #*About .dropdown-toggle class | ||
| + | #*About .dropdown-menu class | ||
| + | #*How to separate groups of related menu items in the dropdown? | ||
| + | #*About .dropdown-divider class | ||
| + | #*Trigger the dropdown menus to the top, left or right of the element | ||
| + | #List Group in Bootstrap | ||
| + | #*About list group classes | ||
| + | #*Create a list group of an unordered list | ||
| + | #*List group with links and buttons | ||
| + | #*About .list-group class and .list-group-item class | ||
| + | #*Using .list-group-flush class, remove the border around the list group | ||
| + | #*About.active class and .disabled class | ||
| + | #*Using list-group-item-action class, create actionable list group items | ||
| + | #*Demonstration of hover, disabled, and active states | ||
| + | #*Adding .list-group-item-secondary class | ||
| + | #*About Contextual Classes | ||
| + | #Alert and Badge in Bootstrap | ||
| + | #*About Alert | ||
| + | #*Various Alert classes | ||
| + | #*How to use .alert-link class? | ||
| + | #*How to close the alert? | ||
| + | #*Create a dismissal alert | ||
| + | #*Create a badge | ||
| + | #*Various Badge classes | ||
| + | #*About Badge as label | ||
| + | #*About Badge as counter | ||
| + | #*How to use .badge-pill class? | ||
| + | #Jumbotron and Breadcrumb in Bootstrap | ||
| + | #*Display the contents such as heading, paragraph, etc. using Jumbotron | ||
| + | #*Create a breadcrumb as Home/Login | ||
| + | #*About Jumbotron | ||
| + | #*Add a .jumbotron class for proper spacing and styling | ||
| + | #*About Breadcrumb | ||
| + | #*Create a breadcrumb by using the .breadcrumb class on the ordered list | ||
| + | #*About .breadcrumb-item class | ||
| + | #*Example to show the breadcrumb | ||
| + | #*Navigate between the two pages using breadcrumb | ||
| + | #*Display the jumbotron for laptop and desktop | ||
| + | #*Display the jumbotron for mobile and tablets | ||
Revision as of 17:27, 6 October 2021
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
Intermediate Level
- Forms in Bootstrap
- Creating various form controls
- About Input box, select box, read-only plain text, check box and radio buttons
- Demonstration of the above controls with examples
- Various Bootstrap classes for designing and styling form elements
- How to use .form-group class to create a proper form layout?
- How to use .form-control class for styling?
- About help text with example
- About File inputs with example
- Observe the 2-column layouts form used in laptop and desktop in responsive design mode
- Observe the single column layout form used for tablets and mobile
- Input Group and Button in Bootstrap
- About Input group classes with examples
- About Input Group Sizing
- Example to change the size of the Input group
- About Button and Button classes
- Example to style the button
- About Outline Button Classes
- About Disabled State Button with example
- About Button Size and its classes
- Demonstration of form layout in laptop and desktop devices
- Demonstration of form layout in tablets and mobile devices
- Inline Forms in Bootstrap
- Design two layouts using Bootstrap classes
- Create Login and Sign up buttons
- How to use button classes on anchor elements?
- About .btn-block class
- Example to show how the .btn-block class is used
- How to link two html page using button?
- About .form-inline class
- Create a login page
- Example to show how the.form-inline class is used
- Creation of customised Inline forms
- Nav in Bootstrap
- Create navigation components
- About .nav class
- Create navigation using ul and ol tags
- Example using <ul and ol tags
- Create navigation using <nav> tag
- Example using <nav> tag
- About horizontal alignment with example
- About tabs and pills with example
- About fill and justify with example
- Display of form layout in laptop and mobile devices
- Navbar in Bootstrap
- About various navbar components
- Create a navigation in the navbar
- Display a logo using navbar-brand class
- Create components using navbar-nav class
- About navbar-expand class
- Create an inline form for search
- How to create a toggle button using the class .navbar-toggler
- About collapse.navbar-collapse class
- Display the navbar in horizontal row for laptop and desktop
- Display the navbar in collapsed form for mobile and tablets
- Dropdowns in Bootstrap
- About dropdowns
- Various characters of dropdowns
- Displaying lists of options and links using dropdowns
- About dropdown classes
- Using the <anchor> tag create a link
- About .dropdown-toggle class
- About .dropdown-menu class
- How to separate groups of related menu items in the dropdown?
- About .dropdown-divider class
- Trigger the dropdown menus to the top, left or right of the element
- List Group in Bootstrap
- About list group classes
- Create a list group of an unordered list
- List group with links and buttons
- About .list-group class and .list-group-item class
- Using .list-group-flush class, remove the border around the list group
- About.active class and .disabled class
- Using list-group-item-action class, create actionable list group items
- Demonstration of hover, disabled, and active states
- Adding .list-group-item-secondary class
- About Contextual Classes
- Alert and Badge in Bootstrap
- About Alert
- Various Alert classes
- How to use .alert-link class?
- How to close the alert?
- Create a dismissal alert
- Create a badge
- Various Badge classes
- About Badge as label
- About Badge as counter
- How to use .badge-pill class?
- Jumbotron and Breadcrumb in Bootstrap
- Display the contents such as heading, paragraph, etc. using Jumbotron
- Create a breadcrumb as Home/Login
- About Jumbotron
- Add a .jumbotron class for proper spacing and styling
- About Breadcrumb
- Create a breadcrumb by using the .breadcrumb class on the ordered list
- About .breadcrumb-item class
- Example to show the breadcrumb
- Navigate between the two pages using breadcrumb
- Display the jumbotron for laptop and desktop
- Display the jumbotron for mobile and tablets
