Bootstrap classes which are mostly used in Rails Applications(VERSION 4.3.1)

11 Sep 2019
0 Comments
Bootstrap classes which are mostly used in Rails Applications(VERSION 4.3.1)

Bootstrap is nothing but free front-end framework which is used for faster and easier web development as well as easily creates responsive designs. There are some most important advantages of bootstrap like-Easy to use responsive features, browser compatibility we can start installation in rails application with the help of the following command.

$ gem install bootstrap -v 4.3.1

 

After the installation of bootstrap, we can directly used bootstrap classes in our rails application or we can use CDN as well in application which is given below.

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

List of bootstrap classes are mostly used in rails application are listed below-

 

  • container-fluid: This is the main/parent class which is used to declaring the whole HTML page content inside the container-fluid class, It will affect the whole screen and takes full width of the viewport and continuously resizes as you change the width of your screen.

  • container: It will affect on all the elements present within that div, it will have fixed left and right margin and it will not take whole width of its main/parent div.
     

Below classes are generally used for designing grid layout specially for Responsive Layouts. Grid structure brings order to a layout making it easier and it also allows to add elements in layout. The grid is nothing but a grouping of rows and columns.

 

  • row: row is used for wrapping the column.

  • col-*: it specifies column layout/width (“*” specify the width of the column which is a range in between 1 to 12).

  • col-sm-*: create column layout/width specifies the width of the column which is a range in between 1 to 12), this class is used for small devices. For eg. Mobile.

  • col-md-*: create column layout/width (“*” specify the width of the column which is a range in between 1 to 12), this is used for medium devices. For eg. Tablet.

  • col-lg-*: create column layout/width (“*” specify the width of the column which is a range in between 1 to 12) this is used for large devices. For eg. Mobile. Desktop.

  • mt-*: It is used for set-top margin (“*” specify the values in a range of 0 to 5).

  • ml-*: It is used for set-left margin (“*” specify the values in a range of 0 to 5).

  • mb-*: It is used for set-bottom margin (“*” specify the values in a range of 0 to 5).

  • mr-*: It is used for set-right margin (“*” specify the values in a range of 0 to 5).

  • pt-*: It is used for set-top padding (“*” specify the values in a range of 0 to 5).

  • pl-*: It is used for set-left padding (“*” specify the values in a range of 0 to 5).

  • pb-*: It is used for set-bottom padding (“*” specify the values in a range of 0 to 5).

  • pr-*: It is used for set-right padding (“*” specify the values in a range of 0 to 5).

  • mx-auto: Centers an element.

  • rounded: It can be used for making a particular thing rounded(or we can use another class like rounded-left, rounded-right, rounded-top, rounded-bottom).

  • table: in this class includes basic styling link padding, bottom border, etc.

  • table-responsive: makes table responsive and automatically add scroll bar as per screen size when it's needed.

 

bootstrap classes which are specially used for text style in which don’t need to write custom CSS just put class in given tag, there are some classes which are given below.

 

  • text-center: this class is used to align text at the center.

  • h1 to h6: We can use this class in a paragraph or makes the text as a heading with different size.

  • text-lowercase: it is used to transform text in lowercase.

  • text-uppercase: it is used to transform text in uppercase.

  • text-capitalize: this class helps you to the capitalized first letter of our text.

Example:

Code:

bootstrap

There are several classes in bootstrap and it also helped for quickly making grid layouts. It is an excellent framework for responsive web design. It provides the flexibility that adjusts its size automatically. These whole classes are easy to use and save time.

For more details about bootstrap classes check the following link:
https://getbootstrap.com


 

 




Leave a comment: