You might have observed that in the Bootstrap package, Bootstrap is using Helvetica font type, which is commonly used worldwide. So you only have the choice of using Helvetica, but you can also have some custom fonts, which you can find at https://www.google.com/fonts. For example, if I wanted the Lato font from the Google library then I can select the font from there and choose the required font in the package, as shown in the following screenshot:

Now the questions are: How can I use this font in my system? Should I download it? Or what is the way out? There is a very simple way, as we have seen in the preceding screenshot; the same dialog box has a tab called EMBED.

When you click on that, it will show you the following screen:

As shown in the @IMPORT tab, you can copy that line from @import url() and add it to your bootstrap.less file or bootstrap.scss file at the top of all the CSS. Then you can us the Lato font family in your application.

Moreover, you can also customize other font properties, such as font size, font color, and font style, if required.

In any application, the navigation flow is very important and the Bootstrap navbar gives you a way to build responsive navigation with several options. You can even customize it by defining its size, color, and type, as shown in the following code:

@navbar-default-bg: # 962D91; 

As seen in the preceding code, we can define whatever color we want in line with the expected look and feel of our navbar and its links:

@navbar-default-color: #008bd1;  
@navbar-default-link-color: #008bd1;  
@navbar-default-link-hover-color: # 962D91;  
@navbar-default-link-active-color: #008bd1; 

Not only for desktops but also for mobile navigation, you can customize the navbar default color settings as per your requirements:

@navbar-default-toggle-hover-bg: darken(@navbar-default-bg, 10%);  
@navbar-default-toggle-icon-bar-bg: #008bd1;  
@navbar-default-toggle-border-color: #008bd1;

You can even set the height and border settings of navbar, as shown in the following code:

@navbar-height: 50px;  
@navbar-border-radius: 5px; 

Forms are very commonly used to get data from the user, where you can use form elements and create components such as inquiry form, registration form, login form, contact us form, and so on. Bootstrap also provides the form component and its benefit lies in its responsive behavior. It is also customizable.

There are a couple of files in the Bootstrap package where you can change form-related CSS and get the expected output.

For example, changing the input field border-radius CSS property:

@input-border-radius: 2px;

Changing the border-focus color for the input field:

@input-border-focus: #002D64; 

What I very much like in Bootstrap's latest version is that it has separate sections for each component/element like React does. For example, in mixins, you can see separate files, which have the respective CSS properties only, so they are be easy to understand, debug, and change.

Form control (.form-control) is one of the beautiful features of the Bootstrap form component and you can see in the following code how easy it is to make custom changes:

.form-control-focus(@color: @input-border-focus) {  
    @color-rgba: rgba(red(@color), green(@color), blue(@color), .3);  
    &:focus {  
        border-color: @color;  
        outline: 1;  
        .box-shadow(~"inset 1px0 1px rgba(0,0,0,.055), 0 0 6px 
        @{color-rgba}");  
    }  
}  

In the preceding example, we have seen how we can customize border colors, outlines, and box shadows; if you don't want a box shadow then you can comment out that particular line and see the output without the box shadow, as shown in the following code:

//.box-shadow(~"inset 1px 0 1px rgba(0,0,0,.055), 0 0 6px @{color-rgba}"); 

You might have observed that I have commented code with //, which we generally do in JavaScript but it is also valid here and we can also use the CSS standard comment /* */ to comment one line of code or multiple lines of code in CSS.

The Bootstrap component also has a ready-made component called button, so whatever button we are composing in our application, we can use Bootstrap classes to enhance it. The Bootstrap button component has different sizes, colors, and states, which can be customized as per your requirements:

We can also achieve a similar look and feel for states by using Bootstrap's button classes as defined here:

.btn-default 
.btn-primary 
.btn-success 
.btn-info 
.btn-warning 
.btn-danger 
.btn-link 

While writing HTML code for a button, you can define the Bootstrap class in the button tag of your application:

<button type="button" class="btnbtn-default">Default</button> 
<button type="button" class="btnbtn-primary">Primary</button> 
<button type="button" class="btnbtn-success">Success</button> 
<button type="button" class="btnbtn-info">Info</button> 
<button type="button" class="btnbtn-warning">Warning</button> 
<button type="button" class="btnbtn-danger">Danger</button> 
<button type="button" class="btnbtn-link">Link</button>

In previous chapters, we have also used Bootstrap classes to achieve responsiveness and the default components of Bootstrap. You can see one example of a button in the following screenshot, where I have defined the following code. We can also change the color of all the defined button states:

<button type="button" class="btnbtn-primary">Agree</button> 

Refer to the following screenshot:

As I said earlier, Bootstrap also provides ready-made responsive themes, which we should use if required. For more details, you can check out http://getbootstrap.com/examples/theme/.

You can also visit the following references to learn about more options for Bootstrap themes:

The Bootstrap grid system has some predefined classes and behaviors, so it would be very helpful to set your page layout and set different behaviors for the same layout in different devices and resolutions.

The following screenshot shows you the setup of the mobile and desktop columns:

The following screenshot shows you the setup of the mobile, tablet, and desktop columns:

This is how you can use predefined classes to set your columns. In small and medium-sized devices, they will automatically adjust your data to fit the resolution without breaking your user interface.

Lastly, I would like to inform you about some Things to remember while dealing with ReactJS.