Bootstrap Classes | Basics

The following table shows all the Bootstrap classes and their uses

Class Name	Definition
form-control	Adds styling to a form element such as text field, checkbox, etc.
form-group	Adds styling to a small subset of form element(s) and their respective labels
row	Adds styilng so that the column based elents can fit inside the whole width spanned by the row
col-xs-*	Allocxates * fraction of the total screen width. xs stands for extra small screen size devices like smartphones
col-sm-*	Allocxates * fraction of the total screen width. sm stands for small screen size devices like large smartphones or mini-tablets
col-md-*	Allocxates * fraction of the total screen width. md stands for medium screen size devices like tablets, Kindle, etc.
col-lg-*	Allocxates * fraction of the total screen width. lg stands for large screen size devices like a 14 inch laptop or 15.6 inch laptop
col-xl-*	Allocxates * fraction of the total screen width. xl stands for extra large screen size devices like desktops
btn	Applies basic styleing to a button
text	Applies basic styling to a text
badge	Creates a basic count or other attribute about an element besisde the element
btn-primary	Adds a bluish radial gradient as the background of a button with very low varience in the starting and the ending color
btn-danger	Adds a reddish radial gradient as the background of a button with very low varience in the starting and the ending color
btn-default	Adds a whitish radial gradient as the background of a button with very low varience in the starting and the ending color
btn-secondary	Adds a greyish radial gradient as the background of a button with very low varience in the starting and the ending color
btn-success	Adds a greenish radial gradient as the background of a button with very low varience in the starting and the ending color
btn-warning	Adds a orangish radial gradient as the background of a button with very low varience in the starting and the ending color
w-*	Adds width specvified in place of * like w-200 will allocate a width of 200px to the element
h-*	Adds height specified in place of * like h-200 will allocate a height of 200px to the element
modal	Creates a simple dialog box
modal-header	Creates a simple dialog box's title bar
modal-footer	Creates a simple dialog box's bottom bar
modal-body	Creates a paragraph for the information to be displayed in a dialog box
table	Creates a simple table
table-striped	Creates a table with zebra-striped rows
table-responsive	Creates a simple table which will display equally well in all the device sizes
breadcrumb	Creates a hierarchy of directories from which the current page is reached by the user
text-primary	Adds a bluish radial gradient as the color of a text with very low varience in the starting and the ending color
text-danger	Adds a reddish radial gradient as the color of a text with very low varience in the starting and the ending color
text-default	Adds a whitish radial gradient as the color of a text with very low varience in the starting and the ending color
text-secondary	Adds a greyish radial gradient as the color of a text with very low varience in the starting and the ending color
text-success	Adds a greenish radial gradient as the color of a text with very low varience in the starting and the ending color
text-warning	Adds a orangish radial gradient as the color of a text with very low varience in the starting and the ending color
carousel	Adds a slideshow of images with controls
fade	Adds a fade in animation to an element (for e.g.,dialog box)
badge-primary	Adds a bluish radial gradient to the notification of a element with very low varience in the starting and the ending color
badge-danger	Adds a reddish radial gradient to the notification of a element with very low varience in the starting and the ending color
badge-default	Adds a whitish radial gradient to the notification of a element with very low varience in the starting and the ending color
badge-secondary	Adds a greyish radial gradient to the notification of a element with very low varience in the starting and the ending color
badge-success	Adds a greenish radial gradient to the notification of a element with very low varience in the starting and the ending color
badge-warning	Adds a orangish radial gradient to the notification of a element with very low varience in the starting and the ending color
dropdown	A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

We will see each of the above in detail in a future post.