Nancyvarkey at 10:01, 31 March 2021

2021-03-31T10:01:06Z

Nehasolanki: Created page with "'''Title of the script: '''Containers in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Boot..."

2021-03-18T10:16:04Z

Created page with "'''Title of the script: '''Containers in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Boot..."

New page

'''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

{| border="1"
|-
| | '''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:

<nowiki><div class="container"></nowiki>

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

<nowiki></div></nowiki>

| | Let us see how to use the''' .container class.'''

Add the '''.container class''' using '''<nowiki><div></nowiki> 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 <nowiki><div></nowiki>

| | 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.

It''' '''means the maximum width of 1140px 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 '''1199px '''to''' 992px'''.

Now observe the '''max-width''' of the '''container''', which is changed to '''960px'''.
|-
| |

| | 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:

<nowiki><div class="container-fluid"></nowiki>
| | Inside the''' <nowiki><div></nowiki> '''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 <nowiki><div></nowiki>

| | 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.

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:

<nowiki><div class="container-md"></nowiki>
| | Inside the''' <nowiki><div></nowiki> '''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 '''768px'''.
|-
| | Inspector -> click on <nowiki><div></nowiki>

Point to the middle section
| | 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%.
|-
| | Using mouse, by dragging change the size

Highlight '''720px'''
| | Now we’ll increase the width of the screen to '''768px '''or above.

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

And at any screen size below '''Medium''' i.e width less than '''768px''', 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 '''5px 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.
|-
|}

Bootstrap/C2/Containers-in-Bootstrap/English - Revision history

Nancyvarkey at 10:01, 31 March 2021

Nehasolanki: Created page with "'''Title of the script: '''Containers in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Boot..."