Day 1 in Bootstrap - Coding Ranjith

Introduction

bootstrap

What is bootstrap ?

Bootstrap 5 is the fifth and latest version of the popular front-end framework called Bootstrap, which is used for building responsive and mobile-first web applications. Bootstrap is an open-source toolkit developed by Twitter, and it provides a collection of CSS and JavaScript components that can be easily integrated into web projects to streamline the development process and create modern, visually appealing user interfaces.

History of Bootstrap

Mark Otto Bootstrap Founder Jacob Thornton Bootstrap Founder

Bootstrap Version

Version Release Date
Bootstrap 2 August 19 2013
Bootstrap 3 January 31 2012
Bootstrap 4 October 29 2014
Bootstrap 5 May 5 2021

Advantages of Bootstrap

What you will need?

Code Editor

Install Bootstrap V5.2x

We can download bootstrap to get compiled CSS and JavaScript, full source code or by famous package manager like npm, RubyGems etc Download Here

What is CDN?

A content delivery network (CDN) refers to a geographically distributed group of servers that work together to provide fast delivery of Internet content.

Container

Containers

Containers are at the core of Bootstrap's grid system, and they typically form the root of all Bootstrap pages. A container is exactly what it sounds like—an element for holding all other content within a section of a page.By remaining toward the top of the element hierarchy, a container provides the base for how the section contained within it is rendered.

There are two types of container classes provided by Bootstrap:

container for various breakpoint

container example

container-fluid example

Grid System

Grid in Bootstrap

The grid system in Bootstrap 5 is a powerful and flexible layout system that allows developers to create responsive and fluid grids for web pages or applications. It is based on a 12-column grid system that can be easily customized to create various column layouts depending on the screen size or device.

Column 12
Column 6
Column 6
Column 4
Column 4
Column 4
Column 3
Column 3
Column 3
Column 3
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Column sm 6
Column sm 6
Column md 6
Column md 6
Column lg 6
Column lg 6
Column xl 6
Column xl 6
Column xll 6
Column xll 6

Breakpoint

Bootstrap 5 includes a responsive grid system that utilizes breakpoints to create responsive web designs. Breakpoints are specific screen widths at which the layout and appearance of a website or web application can change to adapt to different screen sizes, such as those of desktops, tablets, and smartphones.

In Bootstrap 5, there are six predefined breakpoints that are based on common device screen sizes, which are as follows:

  1. Extra Small (xs): This breakpoint is for screens with a maximum width of 575.98 pixels. It is typically used for smartphones and other small mobile devices.
  2. Small (sm): This breakpoint is for screens with a width of 576 pixels or larger. It is often used for small tablets and larger smartphones.
  3. Medium (md): This breakpoint is for screens with a width of 768 pixels or larger. It is commonly used for tablets and larger devices.
  4. Large (lg): This breakpoint is for screens with a width of 992 pixels or larger. It is often used for desktops and larger screens.
  5. Extra Large (xl): This breakpoint is for screens with a width of 1200 pixels or larger. It is commonly used for larger desktop screens.
  6. Extra Extra Large (xxl): This breakpoint is for screens with a width of 1400 pixels or larger. It is used for extra large screens.

container and breakpoint

container-xs example

container-sm example

container-md example

container-lg example

container-xl example

container-xxl example

Columns

Columns in Bootstrap

In Bootstrap 5, columns are an essential part of the grid system that allows developers to create responsive and flexible layouts for web pages or applications. Columns are used to divide the width of a container into equal or varying parts, which can be used to arrange content in a structured manner.

align items start

In Bootstrap 5, align-items-start is a CSS class used to vertically align content to the top of a column within a grid row. It is used in combination with the Flexbox layout classes to control the alignment of content within columns.

1
2
3
4

align items center

In Bootstrap 5, align-items-center is a CSS class used to vertically align content to the center of a column within a grid row. It is used in combination with the Flexbox layout classes to control the alignment of content within columns.

1
2
3
4

align items end

In Bootstrap 5, align-items-end is a CSS class used to vertically align content to the bottom of a column within a grid row. It is used in combination with the Flexbox layout classes to control the alignment of content within columns.

1
2
3
4

align items baseline

1
2
3
4

align items stretch

1
2
3
4

align self

In Bootstrap 5, align-self is a set of CSS classes that can be used to individually control the vertical alignment of content within a column in a grid row. These classes are used in combination with the Flexbox layout classes and provide more granular control over the alignment of individual columns.

align-self-start: Aligns the content to the top of the column.
align-self-center: Aligns the content to the center of the column vertically.
align-self-end: Aligns the content to the bottom of the column.
align-self-stretch: Stretches the content to fill the height of the column.

justify content

justify-content is a CSS property that is commonly used in conjunction with Bootstrap 5's flexbox utilities to control the alignment of flex items along the main axis (horizontal axis) of a flex container. In Bootstrap 5, the justify-content property can be applied using various classes to achieve different alignment options.

justify content start

This class aligns the flex items to the start of the flex container, pushing them towards the beginning of the main axis.

1
2
3

justify content center

This class aligns the flex items to the center of the flex container along the main axis.

1
2
3

justify content end

This class aligns the flex items to the end of the flex container, pushing them towards the end of the main axis.

1
2
3

justify content between

This class evenly distributes the flex items along the main axis, with the first item aligned to the start and the last item aligned to the end. This creates equal spacing between adjacent flex items.

1
2
3

justify content around

This class evenly distributes the flex items along the main axis, with equal spacing around each item. This creates equal spacing between adjacent and outermost flex items.

1
2
3

justify content evenly

This class evenly distributes the flex items along the main axis, with equal spacing between all flex items, including the outermost items.

1
2
3

order

In Bootstrap 5, the order class is used to control the order of flex items within a flex container. It allows you to visually rearrange the order of elements displayed in a flexbox layout, without changing the actual HTML structure. The order class can be applied to individual flex items using numeric values to specify their display order.

1
2
3

--- Happy Coding ---