Bootstrap

Bootstrap Lesson 3: Create forms and layout with Bootstrap

Bootstrap tutorials Learn to create forms and layout with bootstrap

In the previous knowledge bit, we have discussed that how we can include Bootstrap to a web project locally or via CDN. We have also seen that how bootstrap works and learn that how to style button using Bootstrap classes. Now in this bootstrap tutorial, we will discuss jumbotron, container and different classes of forms and input.

Bootstrap tutorial: Create forms and layout with Bootstrap:

Bootstrap is one of the most popular and widely used open-source front-end library which helps the developer in designing Website, and web application. Most of the developer feel comfortable with bootstrap while some feel uneasy and uncomfortable. It is because we include the bunch of styling code that someone else wrote. There is the document available on the official site where you will find the thousands of components which will help you in designing your web application.

Jumbotron:

The first component we are going to introduce is Jumbotron. Jumbotron is Lightweight, flexible Bootstrap component which is used for showcasing hero unit style content. Let’s go ahead and illustrate how Jumbotron works but before we need to create a simple HTML skeleton with a heading <h1>, paragraph <p> and a button. Here is the Skeleton of HTML page below:

Source code:

<!DOCTYPE html>

<html>

<head>

<title>Adding Bootstrap into Project</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

</head>

<body>

<div class="jumbotron">

<h1 class="display-4">Jumotron Example</h1>

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>

<a class="btn btn-primary btn-lg" href="#" role="button">Button</a>

</div>

</body>

</html>       

 

So here is our HTML code, now let see how it would look like:

 

Bootstrap tutorial: Create forms and layout with Bootstrap

 

You can notice that jumbotron takes 100% of the width of our browser window. So here jumbotron takes up 100% of the container. What if we want this jumbotron to appear on the center with some spacing and padding around it. TO do that we need to put Jumbotron code inside of <div> tag and then add container class to that div. here is the demonstration below:

 

<div class="container">
<div class="jumbotron">

<h1 class="display-4">Jumotron Example</h1>

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>

<a class="btn btn-primary btn-lg" href="#" role="button">Button</a>

</div>
</div>       

 

Now let see how our site looks like:

 

How to align div in center

aligning div in centre.

 

So you can notice that it align the whole Jumbotron <div> into the center. Everything which we place inside the <div> class container it will be placed in the middle.

Forms and Input:

The next thing we are going to discuss there is forms and input components. So forms are integral parts of web applications and it’s boring and hard to styling forms one by one. With bootstrap form automatically get some global styling. The styling of components like labels, input fields, selectboxes, textareas, buttons, etc with bootstrap predefined classes is really easy.

There are three different types of form layouts that Bootstrap provides:

  • Vertical Form (this is default form layout)
  • Horizontal Form
  • Inline Form

Bootstrap Vertical Form (default):

This is default Bootstrap forms layout, if we create form then the styling of this class will be applied automatically. We don’t need to add extra class to our components. Now let see how this works:

Source Code:

<form>

<div class="form-group">

<label for="inputEmail">Email</label>

<input type="email" class="form-control" id="inputEmail" placeholder="Email">

</div>

<div class="form-group">

<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">

</div>

<div class="checkbox">

<label><input type="checkbox"> Remember me</label>

</div>

<button type="submit" class="btn btn-primary">Login</button>

</form>       

 

So we are going to include the following code inside <div> tag which is inherited with the class container. Let the output would be look something like this:

 

Creating a form with bootstrap

Form that is made with bootstrap

Bootstrap Horizontal Form:

The horizontal forms are almost like vertical for but layout labels are right aligned and then floated to the left which makes our forms to appear on the same line. To make this type of form we need to make many changes like adding the class of .row class to form-group, and we use the .col-*-* classes to specify the width of the <labels> tag. We have also added .col-form-label class to our <label>. Here is the code below which we have placed inside the <div> element which has the class container.

 

Source code:

<form>

<div class="form-group row">

<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>

<div class="col-sm-10">

<input type="email" class="form-control" id="inputEmail3" placeholder="Email">

</div>

</div>

<div class="form-group row">

<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>

<div class="col-sm-10">

<input type="password" class="form-control" id="inputPassword3" placeholder="Password">

</div>

</div>

<div class="checkbox">

<label class="control-label"><input type="checkbox"> Remember me</label>

</div>

<div class="form-group row">

<div class="col-sm-10">

<button type="submit" class="btn btn-primary">Sign in</button>

</div>

</div>

</form>       

 

The output would be look something like this:

 

aligning the label and input boxes

You can notice that all the labels and input box aligned in the same line.

Bootstrap Inline Form:

This form is slightly different from the previous two forms, in inline form, all the elements aligned in the same line. Like your labels aligned left to your input text on the same line. You can align forms elements in the same line easily by adding the Bootstrap class .form-inline to the <form> element. here is the demonstration below:

Source code:

<form class="form-inline">

<div class="form-group">

<label class="sr-only" for="inputEmail">Email</label>

<input type="email" class="form-control" id="inputEmail" placeholder="Email">

</div>

<div class="form-group">

<label class="sr-only" for="inputPassword">Password</label>

<input type="password" class="form-control" id="inputPassword" placeholder="Password">

</div>

<div class="form-check mb-2 mr-sm-2">

<input class="form-check-input" type="checkbox" id="inlineFormCheck">

<label class="form-check-label" for="inlineFormCheck">

Remember me

</label>

</div>

<button type="submit" class="btn btn-primary mb-2">Submit</button>

</form>       

The output would look like this:

Bootstrap tutorial: bootstrap inline form

 

So the one class contains all the styles that will control that. There are three classes that’s are important form-group, form-control, and form-inline. So form-group is used to add some spacing, form-control makes input bootstrapfied and form-inline is used to wrap entire form in one line.

Conclusion:

In this Bootstrap tutorial, we have talked about Jumbotron, and then introduced forms and input and its types. We have seen how the default form looks like and we have learned the difference in between Vertical form, Horizontal form, and Inline form. We have also demonstrated the al the forms with examples.

Click to comment

Most Popular

To Top