BOOTSTRAP TUTORIAL

 WHAT IS BOOTSTRAP?

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Bootstrap is completely free to download and use!

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

 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.

 INTRODUCTION TO BOOTSTRAP!

 BOOTSTRAP CDN LINKS ARE BELOW

One advantage of using the Bootstrap CDN:
Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.

jQuery Bootstrap uses jQuery for JavaScript plugins (like modals, tooltips, etc). However, if you just use the CSS part of Bootstrap, you don't need jQuery.


 CDN LINKS!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

 WHAT IS A GRID?

In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.
To put in simple words, grids in web design organise and structure content, makes the websites easy to scan and reduces the cognitive load on users.

 What is Bootstrap Grid System?

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.


 Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.

 Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.

 In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

 Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns. For example, four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples.

 Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4.

 Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.

 Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row.

 To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.

 Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).

 You can use predefined grid classes (like .col-4) or Sass mixins for more semantic markup.

 GRID SYSTEM IN BOOTSTRAP

 TABLES IN BOOTSTRAP

Since there are widespread use and requirement of tables on web pages, it has become a significant component in developing web pages. There are collections of HTML tags that deal with these tables. And this is the reason why Bootstrap has inherited all the table styles that can be incorporated within your web page's table elements. In this chapter, you will learn about the different concepts of Bootstrap for the table element.

 TABLES IN BOOTSTRAP PRACTICAL EXAMPLE IN THE VIDEO

 PAGINATION IN BOOTSTRAP

You have seen many websites where there are many pages, and each page has a page count and a series of page-links associated at the bottom of each web page. This is called pagination, and It helps in quickly navigate or switch users from the current page to any other existing page within a website. In this chapter, you will learn about creating pagination using Bootstrap..
Pagination is a series of page numbers that reside in the form of links that allow users to navigate or switch from one page to another within the web site. You have to add a class .pagination to the Unordered List, i.e., <ul> element for creating basic pagination. Then, using the .page-link class within the List <li> element, you can provide hyperlinks to those pagination components.

 PRACTICAL EXAMPLE IN THE VIDEO

 NAVIGATION BARS

A navigation bar is a navigation header that is placed at the top of the page
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class="navbar navbar-default">.

 PRACTICAL EXAMPLE IN THE VIDEO BELOW

 DROP DOWN MENU IN BOOTSTRAP [NAVIGATION BAR]

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list
The .dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown. Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu

 PRACTICAL EXAMPLE IN THE VIDEO BELOW

 ALERTS IN BOOTSTRAP

Bootstrap provides an easy way to create predefined alert messages:
Alerts are created with the .alert class, followed by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger

 PRACTICAL EXAMPLE IN THE VIDEO BELOW

 BOOTSTRAP COLLAPSABLE LAYOUT

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

 HOW IT WORKS?

he collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements that you can toggle. Collapsing an element will animate the height from it’s current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, you may use the class as an independent wrapping element.
1) .collapse hides content
2) .collapsing is applied during transitions
3) .collapse.show shows content

 PRACTICAL EXPLANATION IN THE VIDEO

 SCROLL SPY

Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

 HOW IT WORKS?

The Bootstrap scrollspy is a navigation mechanism that automatically highlights the nav links based on the scroll position to indicate the visitor where they are currently on the page. The scrollspy will make your web page more elegant and accessible, if you are using the bookmark links for directing the visitors to the different sections of a page that has a huge amount of content.
Scrollspy uses data-spy = "scroll" attribute, which can be used as the scrollable area (often this is the element) and add the data-target attribute with the ID or class of the parent element of any Bootstrap .navbar component to indicate navbar is connected with scrollable area and nav links will be highlighted. The optional data-offset attribute defines number of pixels which calculates the position of scroll from top.

 PRACTICAL EXAMPLE IN THE VIDEO

 CAROUSAL IN BOOTSTRAP

A slideshow component for cycling through elements—images or slides of text—like a carousel

 HOW IT WORKS?

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators

 PRACTICAL EXAMPLE IN THE VIDEO

 MODALS IN BOOTSTRAP

Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup that’s customizable and responsive. They can be used to display alert popups, videos, and images in a website. Bootstrap-based websites can use Bootstrap modals to showcase, for example, terms and conditions (as part of a signup process), videos (similar to a standard light box), or even social media widgets.

Bootstrap Modals are divided into three primary sections: the header, body, and footer. Each has its own role and hence should be used accordingly. We’ll discuss these shortly. The most exciting thing about Bootstrap modals? You don’t have to write a single line of JavaScript to use them! All the code and styles are predefined by Bootstrap. All that’s required is that you use the proper markup and attributes and they just work

 PRACTICAL EXAMPLE IN VIDEO

 UTILITY CLASSES IN BOOTSTRAP

Bootstrap 4 has a lot of utility/helper classes to quickly style elements without using any CSS code.

 UTILITY CLASSES

Border utilities
Clearfix utilities
Close icon utilities
Color utilities
Display utilities
Embed utilities
Float utilities
Overflow utilities
Screen reader utilities
Shadow utilities
Spacing utilities
Stretched link utilities
Text utilities
Vertical align utilities
Visibility utilities

 PRACTICAL EXAMPLE IN THE VIDEO

©Copyright 2020 Recimotech Solutions. All Rights Reserved.