Difference between revisions of "Bootstrap/C2/Containers-in-Bootstrap/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of the script: '''Containers in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Boot...")
 
 
Line 55: Line 55:
 
|  | Slide: Containers
 
|  | Slide: Containers
 
|  |  
 
|  |  
−
* '''Containers''' are used to create basic responsive '''website''' layout.
+
* '''Containers''' are used to create basic '''responsive website layout'''.
−
* Responsive '''webpages''' automatically adjust as per screen size.
+
* Responsive '''webpages''' automatically adjust as per '''screen''' size.
 
* '''Containers''' are mainly used to wrap '''website''' elements.  
 
* '''Containers''' are mainly used to wrap '''website''' elements.  
  
Line 86: Line 86:
  
 
Open the file in text editor
 
Open the file in text editor
−
|  | Open the file '''Mypage.html''' in the '''gedit''' '''text editor.'''
+
|  | Open the file '''Mypage.html''' in the '''gedit text editor.'''
  
 
|-
 
|-
Line 105: Line 105:
 
|-
 
|-
 
|  | Only narration
 
|  | Only narration
−
|  | Next, we’ll create our own '''css''' file to assign some additional properties to the '''container class'''.
+
|  | Next, we’ll create our own '''CSS''' file to assign some additional properties to the '''container class'''.
 
|-
 
|-
 
|  | [gedit]
 
|  | [gedit]
Line 155: Line 155:
 
|  | Here we see that the '''heading''' is now placed inside this '''container'''.
 
|  | Here we see that the '''heading''' is now placed inside this '''container'''.
  
−
We also see that the '''container''' is center aligned.
+
We also see that the '''container''' is '''center-aligned'''.
  
 
We had set the black border for this '''container''' in '''Mystyle.css''' file.
 
We had set the black border for this '''container''' in '''Mystyle.css''' file.
Line 188: Line 188:
 
|  | Using mouse, by dragging change the size
 
|  | Using mouse, by dragging change the size
  
−
|  | We can change the size of the screen by dragging the right border with the mouse.
+
|  | 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.
 
Notice that the size of the '''container''' also changes correspondingly.
Line 202: Line 202:
 
Table 1
 
Table 1
  
−
|  | A '''breakpoint''' shows the layout responsive changes for a particular device.
+
|  | A '''breakpoint''' shows the '''layout responsive''' changes for a particular device.
  
 
'''Bootstrap '''has 5 types of '''breakpoints''' as shown in the table.
 
'''Bootstrap '''has 5 types of '''breakpoints''' as shown in the table.
Line 228: Line 228:
 
|  | At the bottom of the page, under the''' “Inspector”''' section, click on the''' <nowiki><div></nowiki> tag''' line.
 
|  | At the bottom of the page, under the''' “Inspector”''' section, click on the''' <nowiki><div></nowiki> tag''' line.
  
−
In the middle section, notice that the '''max-width''' is 1140px.
+
In the middle section, notice that the '''max-width''' is '''1140 pixels'''.
  
−
It''' '''means the maximum width of 1140px is covered by the '''container''' for this screen size.
+
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.
+
In '''.container class''', the width of the '''container''' changes as per the '''screen''' size.
 
|-
 
|-
 
|  | Slide: .container Class
 
|  | Slide: .container Class
  
 
Highlight Extra Large - 1140px
 
Highlight Extra Large - 1140px
−
|  | '''.container:''' It is a responsive fixed width '''container.'''
+
|  | '''.container:''' It is a '''responsive''' fixed width '''container.'''
  
−
Refer this table for the '''container''' width and their respective screen size.
+
Refer this table for the '''container''' width and their respective '''screen''' size.
 
|-
 
|-
 
|  | [Firefox]
 
|  | [Firefox]
Line 249: Line 249:
 
|-
 
|-
 
|  | Drag till screen width is between '''1199px '''to''' 992px'''
 
|  | Drag till screen width is between '''1199px '''to''' 992px'''
−
|  | We’ll change the screen size to '''Large''' i.e width 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 '''960px'''.
+
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.
+
|  | 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.
+
In this way '''.container class''' creates '''responsive web layout''' for all '''screen''' sizes.
 
|-
 
|-
 
|  |  
 
|  |  
Line 266: Line 266:
 
Table3
 
Table3
 
|  |  
 
|  |  
−
* '''.container-fluid:''' It is a full width '''container'''.
+
* '''.container-fluid:''' It is a full-width '''container'''.
−
* It spans across 100% width of the viewport as shown in table
+
* It spans across 100% width of the '''viewport''' as shown in table.
  
 
|-
 
|-
Line 278: Line 278:
  
 
<nowiki><div class="container-fluid"></nowiki>
 
<nowiki><div class="container-fluid"></nowiki>
−
|  | Inside the''' <nowiki><div></nowiki> '''section, change the class name to '''container-fluid.'''
+
|  | Inside the''' <nowiki><div></nowiki> '''section, change the '''class''' name to '''container-fluid.'''
 
|-
 
|-
 
|  | Press Ctrl + S
 
|  | Press Ctrl + S
Line 307: Line 307:
 
Inspector -> click on <nowiki><div></nowiki>
 
Inspector -> click on <nowiki><div></nowiki>
  
−
|  | Using the mouse, we’ll drag the right border to decrease the screen width.
+
|  | Using the mouse, we’ll drag the right border to decrease the '''screen''' width.
  
−
Under the '''“Inspector”''' section, click on the '''<nowiki><div></nowiki>''' tag line.
+
Under the '''“Inspector”''' section, click on the '''<nowiki><div></nowiki> tag''' line.
  
 
In the middle section at the bottom, you can see the '''width''' of the '''container-fluid''' is '''100%'''.
 
In the middle section at the bottom, you can see the '''width''' of the '''container-fluid''' is '''100%'''.
Line 318: Line 318:
 
Even then the''' width''' of the''' container-fluid''' is '''100%.'''
 
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.
+
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'''.
 
In this way '''.container-fluid class''' creates a '''responsive web layout'''.
Line 329: Line 329:
 
Table 4
 
Table 4
 
|  |  
 
|  |  
−
* '''.container-{breakpoint}: '''It''' '''is a full width '''container''' until a given '''breakpoint''' is reached.
+
* '''.container-{breakpoint}: '''It is a full width '''container''' until a given '''breakpoint''' is reached.
  
 
* Following are the '''container classes''' for different '''breakpoints'''.
 
* Following are the '''container classes''' for different '''breakpoints'''.
Line 360: Line 360:
  
 
.container-md {border: 5px dashed black;}
 
.container-md {border: 5px dashed black;}
−
|  | Update the code''' '''as shown here.
+
|  | Update the code as shown here.
  
 
For better visibility, we have set a border for '''.container-md class.'''
 
For better visibility, we have set a border for '''.container-md class.'''
Line 367: Line 367:
 
|  | Save the file.
 
|  | Save the file.
 
|-
 
|-
−
|  | Switch to firefox
+
|  | Switch to Firefox
 
|  | Switch to the '''browser''' and refresh the page.
 
|  | Switch to the '''browser''' and refresh the page.
 
|-
 
|-
Line 373: Line 373:
  
 
Using mouse, by dragging change the size
 
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 '''768px'''.
+
|  | Using the mouse, we’ll drag the right border such that the width of the '''screen''' is below '''768 pixels'''.
 
|-
 
|-
 
|  | Inspector -> click on <nowiki><div></nowiki>
 
|  | Inspector -> click on <nowiki><div></nowiki>
  
 
Point to the middle section
 
Point to the middle section
−
|  | Under the''' “Inspector”''' section, click on the''' <nowiki><div></nowiki>''' tag line.
+
|  | Under the''' “Inspector”''' section, click on the''' <nowiki><div></nowiki> tag''' line.
  
 
In the middle section at the bottom, we see that the '''width''' of the '''container-md''' is 100%.
 
In the middle section at the bottom, we see that the '''width''' of the '''container-md''' is 100%.
Line 385: Line 385:
  
 
Highlight '''720px'''
 
Highlight '''720px'''
−
|  | Now we’ll increase the width of the screen to '''768px '''or above.
+
|  | 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 '''720px'''.
+
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 '''768px''', the width''' '''of '''container-md''' is 100%.
+
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.
+
|  | So it has '''100%''' width until the''' Medium breakpoint''' is reached.
  
 
You can also try with other '''.container-{breakpoint} classes'''.
 
You can also try with other '''.container-{breakpoint} classes'''.
Line 421: Line 421:
  
 
* Open the '''Mypage.html''' file and change the '''container class''' to '''.container-lg'''.
 
* Open the '''Mypage.html''' file and change the '''container class''' to '''.container-lg'''.
−
* Open the '''Mystyle.css''' file and set the '''5px solid black border''' for '''.container-lg class'''.
+
* Open the '''Mystyle.css''' file and set the '''5 pixels solid black border''' for '''.container-lg class'''.
 
* Save both the files.
 
* Save both the files.
 
* Observe the output on the '''web browser'''.
 
* Observe the output on the '''web browser'''.

Latest revision as of 15:31, 31 March 2021

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"