Difference between revisions of "Bootstrap/C3/Inline-Forms-in-Bootstrap/English"

Learning Objectives

• Block level buttons and
• Inline forms

System Requirements

• Ubuntu Linux OS v 18.04
• Bootstrap 4.6.0
• HTML5
• gedit Text Editor and
• Firefox web browser

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.

First, we will create two buttons named Login and Sign Up in Mypage.html.

Then, we will create a login page.

We will use Form.html and Mypage.html files which we saved earlier for this demonstration.

• The files used in this tutorial are available in the Code Files link on this tutorial page.
• Please download and extract them.
• Make a copy and then use them while practising.

I have opened it in the gedit Text Editor.

Here, we are creating two button tags named Login and Sign Up.

We are using button classes on anchor elements.

For this, the link should be given the role equals to “button”.

Let’s see how to do that.

Is used to create block level buttons that span the full width of the parent element.

Let’s use this class in our layout.

Update: <a class="btn btn-primary btn-block" href="#" role="button">Login</a>

<a class="btn btn-primary btn-block" href="#" role="button">Sign Up</a>

See how they span across the full width of this column.

Here, we have linked Form.html using the Sign Up button.

Member registration form opens.

Using the button, we have successfully linked Form.html with Mypage.html.

Is used to display labels, form controls, buttons, etc. in a single horizontal row.

Let’s try this.

I have opened it in the gedit Text Editor.

Type: <form class="form-inline">

Notice that we have added .form-inline class here.

Then we have created two input boxes for email and password.

We have used placeholders, which will give a short hint of the expected input.

We have also created labels for email and password, but they will be invisible on the browser.

This is because we have used the .sr-only class, which hides the label.

This can only be read by the screen reader.

Then we have created one check box for the “Remember me” optionand a Submit button.

Highlight the output

The labels for email and password are invisible.

Notice that all the form elements are displayed in a single horizontal row.

In this way, we can create customised Inline forms.

Here, we have linked Login.html with the help of the Login button.

The Login page opens.

Please note:

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

Let us summarize.

• Block Level buttons and
• Inline Forms

• Open Mypage.html in the web browser.
• Change the screen size of Mypage.html to make it suitable for tablet and mobile devices.
• Click on the Login button and observe the output.
• Hint :
  • Enable the Responsive design mode.
  • Decrease the screen size for all the elements to appear in a single column.

Please download and watch it.

For more details, please write to us.

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

Thanks for watching.