View source for Bootstrap/C3/Input-Group-and-Button-in-Bootstrap/English



{| border="1"
|-
|| '''VISUAL CUE'''
|| '''NARRATION'''
|-
|| Slide: Title
|| Welcome to the Spoken Tutorial on '''“Input Group '''and''' Button''' '''in Bootstrap”.'''
|-
|| Slide 2: 

Learning Objectives
|| In this tutorial, we will learn about:

*'''Input group'''
*'''Input group sizing'''
*'''Button'''
*'''Button classes'''
*'''Outline button classes'''
*'''Disabled state button '''and
*'''Button sizes'''
|-
|| Slide 3: 
System Requirements
|| This tutorial is recorded using,

*'''Ubuntu Linux OS v 18.04 '''
*'''Bootstrap 4.6.0'''
*'''HTML5'''
*'''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'''.
|-
|| [Firefox- Form.html]
|| In this tutorial, we will design a '''form''' '''layout''' as shown here, in '''Bootstrap'''.

We will create an '''input group''' and '''buttons'''.

We will also learn various '''Bootstrap classes''' for designing and '''styling''' them.

Let’s start with the '''input group'''.
|-
|| Slide: Input Group

Input.png

|| Using '''Input group classes''', we can add '''text''' on either side of the '''input textbox.'''

In the '''1st example''', the '''text''' is added before the '''input textbox.'''

In the '''2nd example''', the '''text''' is added after the '''input textbox'''.

In the '''3rd example''', the '''text''' is added before and after the '''input textbox'''.
|-
|| 
|| Let’s add an''' input group''' in our '''HTML''' file.
|-
|| Point to Form.html in My-bootstrap folder

|| Locate the file '''Form.html''' in the '''My-bootstrap''' folder.

We will use the '''Form.html''' '''file '''which we saved earlier for this demonstration.
|-
|| Slide: Code File
|| 
*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.

|-
|| Open Form.html in gedit
|| Open the file '''Form.html''' in a '''text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
|| [gedit - Form.html]

<div class="form-group">
<label>Set Expenditure Limit (Amount)</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Rs</span>
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">.00</span>
|| After '''file input''', type the code as shown.

Here, we have created a '''label''' and an '''Input group'''.
we have used the ''' .input-group-prepend class.'''

This is because we are adding the ''' text Rs '''before the '''Input textbox.'''
we have used the ''' .input-group-append class.'''

This will add '''text .00 after the '''Input textbox.'''
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Open Form.html in Firefox
|| Open the file '''Form.html''' in a '''web browser'''.
|-
|| [Firefox]

|| We have successfully added the '''input''' '''group'''.

Notice that the '''text Rs.''' is added before and the '''text .00 '''is added after the '''Input textbox'''.

|-
|| Slide: Input Group Sizing
|| We can also change the size of the''' Input group'''.

*'''.input-group-lg class '''is used to set the '''Input group size''' to large
*'''.input-group-sm class '''is used to set the '''Input group size''' to small.

These are the additional '''classes''' used with the''' .input-group class.'''

Let’s try this.
|-
|| Switch to Form.html
|| Switch to the''' Form.html''' file.
|-
|| [gedit - Form.html]

Update:
<div class="form-group">
<label>Set Expenditure Limit (Amount)</label>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">Rs</span>
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">.00</span>

|| Add '''.input-group-lg class '''as shown here.
|-
|| Press Ctrl + S
|| Now save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]

|| Observe that, now the size of the '''Input group''' has increased.
|-
|| 
|| Now, let's see how to add '''buttons'''.
|-
|| Slide: Button
|| 
*'''Bootstrap''' has several predefined '''button styles'''.
*'''Styling''' includes general appearance, focus state, sizing, etc.
|-
|| Slide: Button Classes

button.png
|| 
*'''.btn class''' is used to set a basic '''button design'''.
*Along with this '''class''', the following '''button classes''' are used for coloring.

Let’s use them in our '''layout.'''
|-
|| Switch to Form.html
|| Switch to the''' Form.html''' file in the '''editor'''.
|-
|| [gedit - Form.html]

Update:
<div class="row">
<div class="col text-center">
<form>
<div class="form-group">
<button type="submit" class="btn btn-success mx-2">
Submit</button>
<button type="reset" class="btn btn-secondary mx-2">
Cancel</button>
</form>
|| In the '''<body>''' section, at the end type the code as shown.

Here, we have created two '''buttons''' - '''Submit''' and '''Cancel'''.

Here, we have used '''.btn class''' to create a basic '''button design.'''

I have added the '''.btn-success class''' for the '''Submit button'''.

And '''.btn-secondary class''' for '''Cancel button'''.

I have also used the '''mx-2 class''' for '''margin.'''
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]
|| Observe that two '''buttons''' are added at the end of the page.

When we move the cursor over these '''buttons''', their colour gets darker.

We can also create '''outline''' '''buttons'''.
|-
|| Slide: Outline Button Classes

outline.png
|| '''Outline button classes '''remove all background images and colors on any button.

Following are the '''Outline button classes.'''

You can try these on your own later for your own understanding.
|-
|| Slide: Disabled State Button
|| Next''' '''is''' disabled state button.'''

'''disabled''' boolean attribute to any '''button element''' is used to make the '''buttons '''look '''inactive'''.
|-
|| 
|| Let’s disable the '''Cancel button.'''
|-
|| Switch to Form.html
|| Switch to the''' Form.html''' file in the '''text editor'''.
|-
|| [gedit - Form.html]

Update:
<div class="row">
<div class="col text-center">
<form>
<div class="form-group">
<button type="submit" class="btn btn-success mx-2">
Submit</button>
<button type="reset" class="btn btn-secondary mx-2" disabled >
Cancel</button>
</form>
|| Add the '''disabled''' boolean attribute to the '''Cancel button,''' as shown here.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]
|| Notice the change in the '''Cancel button.'''
The colour of the '''Cancel button''' is lighter now.

Also, there is no change when we move the cursor over it.

This is because we have '''disabled''' the''' Cancel button.'''
|-
|| 
|| Next, let’s learn to change the size of the '''buttons'''.
|-
|| Slide: Button Sizes
|| 
* '''.btn-lg class '''is used to set '''button''' size to large.
* '''.btn-sm class''' is used to set '''button''' size to small.
These are the additional '''classes''' used with the''' .btn class.'''

You can try these on your own later for your own understanding.
|-
|| [Firefox]

Right click >> Inspect Element

Click on Responsive Design Mode

|| Now let’s see how these pages look with different screen sizes.

The present '''form''' '''layout''' is used for '''laptop and desktop devices.'''

Enable the '''Responsive design mode'''.

I will decrease the screen size.

Now all the '''elements''' are appearing in a single '''column'''.

This '''layout''' is used for '''tablets '''and''' mobile devices.'''

The size of the '''Input group''' and alignment of the '''buttons''' gets adjusted as per the screen size.

This is because we have used '''Bootstrap classes'''.
|-
|| 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:

*'''Input group'''
*'''Input group sizing'''
*'''Button'''
*'''Button classes'''
*'''Outline button classes'''
*'''Disabled state button '''and
*'''Button sizes'''
|-
|| Slide 8: Assignment
|| As an assignment-

*Open the '''Form.html''' file.
*Set the size of '''Submit''' and '''Cancel buttons''' to '''large'''.
*Save the file.
*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 the Ministry of Education (MoE), Govt. of India.
|-
|| Slide: Thanks
|| The script and video for this tutorial was contributed by Neha Solanki.

This is Nancy Varkey from the Spoken Tutorial project team, IIT Bombay signing off.

Thanks for watching.
|-
|}