We have completed our first Hello World app with React and Bootstrap and everything looks good and as expected. Now it's time do more and create one static login form, applying the Bootstrap look and feel to it. Bootstrap is a great way to make your app a responsive grid system for different mobile devices and apply the fundamental styles on HTML elements with the inclusion of a few classes and divs.

First, let's start to make an HTML structure to follow the Bootstrap grid system.

Create a div and add a className .container for (fixed width) and .container-fluid for (full width). Use the className attribute instead of using class:

<div className="container-fluid"></div> 

As we know, class and for are discouraged as XML attribute names. Moreover, these are reserved words in many JavaScript libraries so, to have a clear difference and identical understanding, instead of using class and for, we can use className and htmlFor. Create a div and add the className="row". The row must be placed within .container-fluid:

<div className="container-fluid"> 
    <div className="row"></div> 
</div>

Now create columns that must be immediate children of a row:

<div className="container-fluid"> 
    <div className="row"> 
<div className="col-lg-6"></div> 
        </div> 
</div>

.row and .col-xs-4 are predefined classes that are available for quickly making grid layouts.

Add the h1 tag for the title of the page:

<div className="container-fluid"> 
    <div className="row"> 
<div className="col-sm-6"> 
<h1>Login Form</h1> 
</div> 
    </div> 
</div>

Grid columns are created by the given specified number of col-sm-* of 12 available columns. For example, if we are using a four column layout, we need to specify to col-sm-3 lead-in equal columns:

We are using the col-sm-* prefix to resize our columns for small devices. Inside the columns, we need to wrap our form elements label and input tags into a div tag with the form-group class:

<div className="form-group"> 
    <label for="emailInput">Email address</label> 
    <input type="email" className="form-control" id="emailInput" 
    placeholder="Email"/> 
</div>

Forget the style of Bootstrap; we need to add the form-control class in our input elements. If we need extra padding in our label tag then we can add the control-label class on the label.

Let's quickly add the rest of the elements. I am going to add a password and submit button.

In previous versions of Bootstrap, form elements were usually wrapped in an element with the form-action class. However, in Bootstrap 3, we just need to use the same form-group instead of form-action. We will discuss Bootstrap classes and responsiveness in more detail in Chapter 2, Lets Build a Responsive Theme with React-Bootstrap and React.

Here is our complete HTML code:

<div className="container-fluid">
    <div className="row">
        <div className="col-lg-6">
            <form>
                <h1>Login Form</h1>
                <hr/>
                <div className="form-group">
                    <label for="emailInput">Email address</label>
                    <input type="email" className="form-control"
                    id="emailInput" placeholder="Email"/>
                </div>
                <div className="form-group">
                    <label for="passwordInput">Password</label>
                    <input type="password" className=
                    "form-control" id="passwordInput" 
                    placeholder="Password"/>
                </div>
                <button type="submit" className="btn btn-default
                col-xs-offset-9 col-xs-3">Submit</button>
            </form>
        </div>
    </div>
</div>

Now create one object inside the var loginFormHTML script tag and assign this HTML:

Var loginFormHTML = <div className="container-fluid">
<div className="row">
    <div className="col-lg-6">
        <form>
            <h1>Login Form</h1>
            <hr/>
            <div className="form-group">
                <label for="emailInput">Email              
                address</label>
                <input type="email" className="form-control"
                id="emailInput" placeholder="Email"/>
            </div>
            <div className="form-group">
                <label for="passwordInput">Password</label>
                <input type="password" className="form-
                control" id="passwordInput" placeholder="Password"/>
            </div>
            <button type="submit" className="btn btn-default col-xs-
            offset-9 col-xs-3">Submit</button>
        </form>
    </div>
</div>

We will pass this object in the React.DOM() method instead of directly passing the HTML:

ReactDOM.render(LoginformHTML,document.getElementById('hello'));

Our form is ready. Now let's see how it looks in the browser:

The compiler is unable to parse our HTML because we have not enclosed one of the div tags properly. You can see in our HTML that we have not closed the wrapper container-fluid at the end. Now close the wrapper tag at the end and open the file again in your browser.

Here is the HTML after closing the div tag:

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <title>ReactJS Chapter 1</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script type="text/javascript" src="js/react.min.js"></script>
        <script type="text/javascript" src="js/react-dom.min.js"> 
        </script>
        <script src="js/browser.min.js"></script>
    </head>
    <body>
        <!-- Add your site or application content here -->
        <div id="loginForm"></div>
        <script type="text/babel">
            var LoginformHTML = 
            <div className="container-fluid">
             <div className="row">
            <div className="col-lg-6">
            <form>
              <h1>Login Form</h1>
            <hr/>
            <div className="form-group">
              <label for="emailInput">Email address</label>
              <input type="email" className="form-control" id=
              "emailInput" placeholder="Email"/>
            </div>
            <div className="form-group">
            <label for="passwordInput">Password</label>
            <input type="password" className="form-control"
            id="passwordInput" placeholder="Password"/>
            </div>
            <button type="submit" className="btn btn-default 
            col-xs-offset-9 col-xs-3">Submit</button>
            </form>
             </div>
            </div>
            </div>
                        
ReactDOM.render(LoginformHTML,document.getElementById
('loginForm');
            
        </script>    
    </body>
</html>

Now, you can check your page on a browser and you will be able to see the form with the look and feel as shown in the following screenshot:

Now it's working fine and looks good. Bootstrap also provides two additional classes to make your elements smaller and larger: input-lg and input-sm. You can also check the responsive behavior by resizing the browser. Observe the following screenshot:

That looks great. Our small static login form application is ready with responsive behavior.

As this is an introductory chapter, a question might come to your mind of how will React be helpful or beneficial?

Here's your answer:

The preceding points are very high-level and we will see more benefits in detail with the upcoming examples in the chapters that follow.