Bootstrap/C2/Containers-in-Bootstrap/English

From Script | Spoken-Tutorial
Revision as of 15:31, 31 March 2021 by Nancyvarkey (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Title of the script: Containers in Bootstrap

Author: Neha Solanki

Domain Reviewer: Ankita Maske

Novice Reviewer: Abhijit Bonik

Keywords: Bootstrap, CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, container class, container-fluid class, container-{breakpoint} class


Visual Cue Narration
Slide: Title Welcome to the Spoken Tutorial on “Containers in Bootstrap”.
Slide 2:

Learning Objectives

In this tutorial, we will learn about:
  • Containers
  • Breakpoints and
  • Types of container classes such as
    • .container
    • .container-fluid
    • .container-{breakpoint}
Slide 3:

System Requirements

This tutorial is recorded using,
  • Ubuntu Linux OS v 18.04
  • Bootstrap 4.6.0
  • HTML5
  • CSS3
  • gedit Text Editor and
  • Firefox web browser
Slide 4: Prerequisite

https://spoken-tutorial.org

  • To follow this tutorial, you should be familiar with HTML and CSS
  • If not, please go through the HTML and CSS tutorials on this website.
Slide: Containers
  • Containers are used to create basic responsive website layout.
  • Responsive webpages automatically adjust as per screen size.
  • Containers are mainly used to wrap website elements.
Slide 5: Code Files
  • The file used in this tutorial is available in the Code Files link on this tutorial page.
  • Please download and extract it.
  • Make a copy and then use it while practising.
Point to Mypage.html in My-bootstrap folder I will go to My-bootstrap folder on my Desktop which I had created earlier.

Here, I had saved the Mypage.html file.

I’ll use this file for demonstration.

Open Mypage.html in Firefox First open the file Mypage.html in Firefox web browser.
[Firefox] It has one heading which we had created earlier.

Now we will add a container class in this HTML file to wrap this heading.

Point to Mypage.html in My-bootstrap folder

Open the file in text editor

Open the file Mypage.html in the gedit text editor.
[gedit - Mypage.html]

Update:

<div class="container">

<h1 class="text-danger"> Bharat Mart </h1>

</div>

Let us see how to use the .container class.

Add the .container class using <div> tag as shown here.

Only narration Next, we’ll create our own CSS file to assign some additional properties to the container class.
[gedit]

>>Create a new document

Click on “Create a new document.
[gedit - untitled document 1]

Type:

.container {border: 5px solid black;}

Type the code as shown.

This will set a 5 pixel black solid border for the .container class.

Press Ctrl + S

Save in My-bootstrap

Save the file as Mystyle.css in the My-bootstrap folder.
Only narration Next we will link Mystyle.css file to Mypage.html file.
Switch to Mypage.html Switch back to Mypage.html file in the text editor.
[gedit - Mypage.html]

Type:

<link rel="stylesheet" href="Mystyle.css">

Inside the <head> section, next to <link> tag, type the code as shown here.
Textbox:

Bootstrap CSS link should always be written before any other CSS link.

Note that Bootstrap CSS link should always be written before any other CSS link.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox] Here we see that the heading is now placed inside this container.

We also see that the container is center-aligned.

We had set the black border for this container in Mystyle.css file.

This is the container which is defined in the inbuilt code file bootstrap.css.

Next we will see how this page works in responsive design mode.
[Firefox]

Textbox [Press Ctrl+Shift+C]

Right click >> Inspect Element

Press Ctrl+Shift+C or right-click on the page and select “Inspect Element”.

Inspect Element window opens.

[Firefox]

Textbox [Press Ctrl+Shift+M]

Click on Responsive Design Mode

Press Ctrl+Shift+M or click on “Responsive Design Mode” at the top right of this window.

Now the page is in responsive mode.

Highlight the width and height of the page with red box At the top of the page, we can see the present width and height of the page.
Using mouse, by dragging change the size We can change the size of the screen by dragging the right border with the mouse.

Notice that the size of the container also changes correspondingly.

There are many breakpoints in the screen size.

Let’s understand what are breakpoints.

Slide: Breakpoint

Table 1

A breakpoint shows the layout responsive changes for a particular device.

Bootstrap has 5 types of breakpoints as shown in the table.

You can choose any screen size according to your device.

Now we will learn how to change the size to Extra Large.
[Firefox]

Using mouse, by dragging change the size

Drag till screen width is greater than 1200px

Switch back to the browser.

Using the mouse, we’ll drag the right border.

We want to change the size to Extra Large i.e width greater than 1200px.

[Firefox]

Inspector -> click on <div>

At the bottom of the page, under the “Inspector” section, click on the <div> tag line.

In the middle section, notice that the max-width is 1140 pixels.

It means the maximum width of 1140 pixels is covered by the container for this screen size.

In .container class, the width of the container changes as per the screen size.

Slide: .container Class

Highlight Extra Large - 1140px

.container: It is a responsive fixed width container.

Refer this table for the container width and their respective screen size.

[Firefox]

Using mouse, by dragging change the size

Switch back to browser.

Using the mouse, we’ll drag the right border as shown.

Drag till screen width is between 1199px to 992px We’ll change the screen size to Large i.e width between 1199 pixels to 992 pixels.

Now observe the max-width of the container, which is changed to 960 pixels.

Try changing to other screen sizes - Medium, Small & Extra Small and observe the change.

In this way .container class creates responsive web layout for all screen sizes.

Next let’s understand .container-fluid class with an example.
Slide: .container-fluid Class

Table3

  • .container-fluid: It is a full-width container.
  • It spans across 100% width of the viewport as shown in table.
Switch to Mypage.html Switch to the Mypage.html file.
[gedit - Mypage.html]

Update:

<div class="container-fluid">

Inside the <div> section, change the class name to container-fluid.
Press Ctrl + S Save the file.
Switch to Mystyle.css Switch to the Mystyle.css file.
[gedit - Mystyle.css]

Update:

.container-fluid { border: 5px dotted black;}

Update the code shown here.

For better visibility, we have set a border for .container-fluid class.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Using mouse, by dragging change the size

Inspector -> click on <div>

Using the mouse, we’ll drag the right border to decrease the screen width.

Under the “Inspector” section, click on the <div> tag line.

In the middle section at the bottom, you can see the width of the container-fluid is 100%.

Using mouse, by dragging change the size Now we’ll increase the screen width.

Even then the width of the container-fluid is 100%.

At any screen size, max-width of container-fluid will take up the entire width.

In this way .container-fluid class creates a responsive web layout.

Next let’s learn about .container-{breakpoint} class.
Slide: .container - {breakpoint} Class

Table 4

  • .container-{breakpoint}: It is a full width container until a given breakpoint is reached.
  • Following are the container classes for different breakpoints.
  • They have 100% width until the breakpoint is reached.
Only narration Let’s understand .container-{breakpoint} class with an example.
Switch to Mypage.html Switch to the Mypage.html file.
[gedit - Mypage.html]

Update:

<div class="container-md">

Inside the <div> section, change the class name to container-md.
Press Ctrl + S Save the file.
Switch to Mystyle.css Switch to the Mystyle.css file.
[gedit - Mystyle.css]

Update:

.container-md {border: 5px dashed black;}

Update the code as shown here.

For better visibility, we have set a border for .container-md class.

Press Ctrl + S Save the file.
Switch to Firefox Switch to the browser and refresh the page.
[Firefox]

Using mouse, by dragging change the size

Using the mouse, we’ll drag the right border such that the width of the screen is below 768 pixels.
Inspector -> click on <div>

Point to the middle section

Under the “Inspector” section, click on the <div> tag line.

In the middle section at the bottom, we see that the width of the container-md is 100%.

Using mouse, by dragging change the size

Highlight 720px

Now we’ll increase the width of the screen to 768 pixels or above.

We observe that the max-width of the container-md is 720 pixels.

And at any screen size below Medium i.e width less than 768 pixels, the width of container-md is 100%.

So it has 100% width until the Medium breakpoint is reached.

You can also try with other .container-{breakpoint} classes.

Like .container-xl, .container-lg and .container-sm.

In this way .container-{breakpoint} class creates a responsive web layout.

Only narration With this we have come to the end of this tutorial.

Let us now summarize.

Slide 6: Summary In this tutorial, we have learnt:
  • Containers
  • Breakpoints and
  • Types of container classes such as
    • .container
    • .container-fluid
    • .container-{breakpoint}
Slide 8: Assignment As an assignment-
  • Open the Mypage.html file and change the container class to .container-lg.
  • Open the Mystyle.css file and set the 5 pixels solid black border for .container-lg class.
  • Save both the files.
  • Observe the output on the web browser.
Slide:

About Spoken Tutorial project

The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide: Spoken Tutorial Workshops The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Slide: Forum Please post your timed queries on this forum.
Slide: Acknowledgement Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
Slide: Thanks This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.

Contributors and Content Editors

Nancyvarkey, Nehasolanki

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Bootstrap/C2/Containers-in-Bootstrap/English&oldid=54963"