Bootstrap/C3/Input-Group-and-Button-in-Bootstrap/English

From Script | Spoken-Tutorial
Revision as of 12:52, 2 September 2021 by Nancyvarkey (Talk | contribs)

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


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]

<label>Set Expenditure Limit (Amount)</label>

Rs <input type="text" class="form-control">

.00

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:

<label>Set Expenditure Limit (Amount)</label>

Rs <input type="text" class="form-control">

.00

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:

<form>

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

<form>

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