How to Use the Bootstrap Framework Part 2

Written by Irma Azarian on November 9, 2015

segue-blog-bootstrap-framework-part2

 

In continuation of my first blog, I will be discussing the rest of my Beginner Bootstrap Website. The Bootstrap grid in Figure 1 is very similar to a table. It uses the div tags with class “container” to set up the grid rows and columns. Since I am also using ColdFusion with Bootstrap, in the code I have set up a which selects data from the art gallery database. I have selected to display the customer, order date, art name, and the total price of the order. There is a lot of flexibility with how to size the rows and columns using Bootstrap.To keep it simple, I have used “col-sm-3” which sets the column to size of small and spans three columns. See Figure 2 for the code to create the Art Orders grid.

Example of a Bootstrap Grid

Figure 1

Bootstrap Grid Code

Figure 2


Figure 3 displays a login Form. The login form doesn’t have any functionality for processing. I have created it to demonstrate how to create a form using Bootstrap. The code in Figure 4 shows how the form is created. Bootstrap has a built in form


tag. By using this tag, you are identifying the form and the form-group class provides a customized look and feel. You can easily add form labels and inputs by using the form-group class. I have added the email and password text boxes and the checkbox will allow a user to save their credentials if chosen. Once done, they can submit the form by clicking the “Submit” button, which at the moment is blue. The class “btn btn-primary” is the code that sets the button color to blue. Other options would be “btn-success” for green, “btn-danger” for red, etc. It uses the same type of color classes as the other examples I explained earlier.


Bootstrap Login Form


Figure 3


Bootstrap Login form code


Figure 4


Another great feature of using Bootstrap with an application is that it can be resized. You can just resize the browser and it will manipulate the page to fit the screen. In Figure 5, I have resized the Login form to a size similar to a mobile device. I have also resized the Table Page shown in Figure 6. It doesn’t fit as nicely as the form, but it’s still usable just as if it was on a desktop application. The table can be scrolled through to view the data and the responsive utilities allow for mobile friendly development. A combination of classes can be used to allow the application to display in different sized devices.


Resized Login form in Bootstrap


Figure 5


Resized Table Page in Bootstrap 


Figure 6


The code in Figure 7, displays how you can set different text to display in the application based on the size of the device. The class “visible-**” will display whatever text is within the tag in the size selected. Examples of how this works are shown in Figures 8 through 10.


Code that changes different text in Bootstrap


Figure 7


 Different Sizes for Display in Bootstrap


Figure 8


Different Text Sizes in Bootstrap


Figure 9


Different size displays in Boostrap


Figure 10


As you can see, Bootstrap is very easy to use and very powerful. I believe it will be useful for quickly enhancing an application and making it flexible for different devices. I have not used Bootstrap for Segue, but while doing this sample website I found it effortless to integrate with ColdFusion.There are many features available in Bootstrap that I didn’t even get to mention. I hope you’ll give Bootstrap a try.


Need Help? Contact us