Grid, Code, and Button of Bootstrap

 What is Grid?

A Grid is series of a structure in graphic design, (usually two-dimensional) that are used to subdivide a page (vertically and horizontally) into margins, columns, inter-column spaces, lines and spaces between blocks of type and create a responive images. It is mostly used to design layout and content structure to print a design. In web design, it is a very effective and efficient method to create a consistent layout rapidly and effectively using HTML and CSS Languages.

 What is Bootstrap Grid System ?

*Bootstrap Grid Sytem is used for making a rows and columns.

*Bootstrap’s grid system is responsive, and the columns will re-arrange depending on the screen size:-

It’s built with flexbox and is fully responsive on a big screen it might look better with the content and organized in three columns, but on a small screen it would be better if the content items were stacked on top of the all others.

Bootstrap’s grid system allows up to 12 columns across the each page.

Mobile First Strategy


 Determine what is most important.


 Design to smaller widths first.

 Base CSS address is the mobile first device ;for media queries address widely used in tablet, desktops.

 Progressive Enhancement

 Add elements as screen size increases.

 Working of Bootstrap Grid System

* Grid systems are used for creating a layouts page through a series of rows and columns in your content. Here’s how the Bootstrap grid system works in the websites −:

* Rows must be placed within a .container class used for proper alignment and padding.

* Use rows to creating for a horizontal groups of columns.

* A grid classes is also known asPredefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less Grids can also be used for more semantic layouts tables and forms.

* Columns create (gaps between column content)called also gutters via padding. That padding is offset in rows for the first coloumn and the last column via negative margin on rows.

* Grid columns are created for specifying the twelve numbers available in columns you want to span. For example, three equal columns like three .col-xs-4.

 Grid Classes

The Bootstrap grid system has four classes:-

 xs-> (for phones – screens less than 768px wide)

 sm-> (for tablets – screens equal to or greater than 768px wide)

 md-> (for small laptops – screens equal to or greater than 992px wide)

 lg-> (for laptops and desktops – screens equal to or greater than 1200px wide)

 Grid Options

The following table are summarizes the how Bootstrap grid system works across multiple devices −:

 Basic Grid Structure

These are the basic structure of Bootstrap grid System −:

 Responsive column resets

You may properly used to reset offsets, pushes, or pulls. See this in action in the grid example. -:

Live Demo

Column ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes. -:

Live Demo

 Bootstrap -Code

Substantiation and sample for showing inline and multiline blocks of code with Bootstrap.

Bootstrap permit you to show code with two different key ways −

 The first is the code tag. Though you are departure to be showing code inline, you should be using the code tag.

 Second is the pre tag. Though the code necessary to be showed as a standalone block element or if it has multiple lines, then you should use the pre tag.

Structure of Bootstrap Code-:

Examples of Bootstrap Code use include:-

To display code as a standalone block element use <pre> tag as:

      <h1>Article Heading</h1>

 Inline code

Wrap inline snippets of code with code <section> should be wrapped as inline.. yow will be sure to scape HTML angle brackets.


<section> should be wrapped as inline.

 Code blocks

Use pre tag for many multiples lines of code. Once again, You will be sure to vent any angle brackets in the code for proper way rendering. You may choicely link the like.pre-scrollable class, if you will setting a max-height of 350px and provide a y-axis scrollbar.

<p>Gurukul Zone SRCS!...</p>
<p>Read About...</p>


For indicating variables use the var tag.



y = mx + b

 User input

Use the kbd to indicate input that is typically entered via keyboard.


To switch directories, kinds cd Prosecute by the name of the directory.
To edit settings, press ctrl + ,
To copy files, select the files and press ctrl + c
To paste files, select the files and press ctrl + v

 Sample output

For indicating sample output from a program use the samp tag.


This is a sample example of Gurukul Zone SRCS! Know more.

 How to Create Bootstrap Button?

Buttons are used for various purposes. You can submit or reset an HTML form, perform interactive actions such as showing or hiding something on a web page on click of the button, redirecting the user to another page, etc. Bootstrap provides a quickly and easiest way to create the customize buttons.

 Bootstrap Button Styles-> Different classes are available in Bootstrap for styling the buttons. Also, they indicate different states or semantic. Button styles can be applied to any element. However, it is applied normally to the for the best rendering. To achieve these styles, Bootstrap has many classes such as .btn, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-link.etc

Here is an example to show you how to create different styles of buttons in Bootstrap:-


Bootstrap Example

Button Styles

 Button Sizes-> You can scale a button up or down with the help of bootstrap. Thus, you can also make larger buttons or smaller through adding an extra class .btn-lg or .btn-sm.

Example-how its work.
Bootstrap Example

Button Sizes

 Outline Buttons-> The outline buttons are a different way of styling them. You can also create a outline buttons by replacing modifier classes buttons.

Bootstrap 4 Outline Buttons

 Disabled Buttons-> We might need to disable a button for a certain reason. For example, In case a user is not eligible to perform this particular action, or we want to ensure that user should performed all other required actions before proceed to this particular action.


Button Styles

 Active Buttons-> You can use the class .active to force the buttons look like active or pressed. Usually you don’t need to add this class in the the buttons because their active state is automatically styled by the Bootstrap using CSS :active pseudo-class.


Button Styles

Leave a Reply

Your email address will not be published. Required fields are marked *