Scribd
Upload
751 views

Bootstrap Notes For Assignment 02

The document discusses the layout features of Bootstrap, including: 1. Bootstrap provides built-in classes to create responsive website layouts without needing to specify widths, paddings, and margins for different screen sizes. 2. Bootstrap uses a grid system with containers, rows, and columns (cols) to layout content, and includes different col classes and breakpoints for responsive design across devices. 3. CSS files can be linked directly from a CDN or downloaded, and custom CSS should be linked after Bootstrap CSS to override styles. Media queries in Bootstrap CSS handle responsiveness at different breakpoints.

Uploaded by

Radey32167
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
751 views

Bootstrap Notes For Assignment 02

The document discusses the layout features of Bootstrap, including: 1. Bootstrap provides built-in classes to create responsive website layouts without needing to specify widths, paddings, and margins for different screen sizes. 2. Bootstrap uses a grid system with containers, rows, and columns (cols) to layout content, and includes different col classes and breakpoints for responsive design across devices. 3. CSS files can be linked directly from a CDN or downloaded, and custom CSS should be linked after Bootstrap CSS to override styles. Media queries in Bootstrap CSS handle responsiveness at different breakpoints.

Uploaded by

Radey32167
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 27

Generic Layout of website

Without Bootstrap

But by using the Bootstrap we do not need to set the width,padding , margins etc.

Bootstrap provides us built in classes to design layout within short time.

We have four different kinds of breakpoint so in order to make the website responsive for different
devices we have to design for each device.

Four different kinds of breakpoints are

1- Large (Laptop, desktop screen)


2- Medium(Laptop, desktop screen)
3- Small(Tablets, Ipads etc)
4- Xtra-Small (mobiles)

But Bootstrap provides us built in option to make the website responsive.


Bootstrap is available in

1-Compiled CSS and JS


2-Source Files

3-bootstrapCDN

( you do not need to download, just need active internet connection)


In bootstrap CSS for the Layout of web page , we have many classes . but mainly we have three
classes, Container, Row and Col classes.

We apply container class on div


The fixed container have FIVE different width or break points according to screen size in which page
is rendered/displayed .

In bootstrap CSS file, separate media query is written for different break points to make the web
pages responsive/adaptive.
In order to do your own styling do not change main bootstrap.css file but make your own

Css file such as style.css ,

Remember :

Always put your css file after bootstrap.css file, because your file style.css will over-write
bootstrap.css.

In order to see the width of container , right click page and click inspect(in
google chrome) and inspect element(in firefox) to see in google or firefox
developer tool

See screen below


Output
We always put row class inside the container class and col class inside the row class.

Col class

There are different type of col classes.

In order to divide the row in equal width of length we use bootstrap col class.
Manually break the div we use w-100 class
We use row-cols-2 to automatically add two colums in in row

Output
Do it responsive by stretching through google developer tool ..
Bootstrap have different media query for different screen sizes and bootstrap have different classes.

If we apply col-md , and stretch the web to col-md, col-lg and col-xl, then the
width of div tag will be equally length. But if we shrink to that extent in which
the div width becomes col-sm or less than col-sm than div tag width will be
100 per cent automatically.

Example
We have shrink to col-sm, each div take width 100 per cent.
Previously , the col class divide the row class in equal length, but in actual
requirements we always do not need to equal length columns. So we have Grid
System in bootstrap CSS.
Below Grid is out of bound
Design the following website with Grid System
Output

Without border

With border
See the responsive behavior in small screen

Design the following using Bootstrap Grid System

You might also like