Bootstrap - Form Layout

Quiz

This chapter will discuss about Bootstrap form layout. Add structure to your forms with form layout options, from inline to horizontal to implementing custom grids.

Form layout

Bootstrap gives no default styling for the
element, but there are a few capable browser highlights that are given by default. Each group of form fields must be inside a element.
Ensure to be specify and include a type attribute for
Forms are stacked vertically by default. Bootstrap uses display: block and width: 100% to nearly all form controls. To change layout of each form, use additional classes.

Utilities

To add some structure to forms should be use margin utilities. Use basic grouping of labels, controls, optional form text, and form validation messages.
For consistency, sticking to margin-bottom utilities and employing a single direction all through the form is recommended.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
       Bootstrap - Layout 
       
       
       
       
       
    
    
      
        Username
        
      
      
        Password

Form grid

Use grid classes for building the more complex forms. Form a grid for form layouts that require multiple columns, varied widths, and additional alignment options. You need to enable Sass variable using $enable-grid-classes.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
       Bootstrap - Layout

Gutters

To control over the gutter width in the inline as block direction use the gutter modifier classes. By using $enable-grid-classes you can enable Sass variable.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
       Bootstrap - Layout

Create more complex layouts using the grid system.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
       Bootstrap - Layout
       
       
       
       
       
    
    
      
        
          First name
          
        
        
          Last name
          
        
        
          Email
          
        
        
          Password
          
        
        
          Address
          
        
        
          Adharcard no
          
        
        
          Mobile no
          
        
        
          
            
            
              I agree to terms and conditions

Horizontal form

Use the class .row to form groups to create horizontal forms with the grid. Use the class .col-*-* to define the width of the labels and controls.
To make a form vertically centered with their associated form controls, use the class .col-form-label to .

Example

You can edit and try running this code using Edit & Run option.

    
    
    
       Bootstrap - Layout
       
       
       
       
       
    
    
      
        
          Email
          
            
          
        
        
          Password
          
            
          
        
        
          Language Known
          
            
              
              
                English
              
            
            
              
              
                Hindi
              
            
              
                
                
                  marathi
                
             
            
              
              
                Others
              
            
          
        
        
          
            
              
              
                Radio Button

Horizontal form label sizing

Use the classes .col-form-label-sm or .col-form-label-lg to your or to follow the size of .form-control-sm and .form-control-lg respectively.

Example

You can edit and try running this code using Edit & Run option.

  
  
  
     Bootstrap - Layout
     
     
     
     
     
  
  
    
      Username
      
        
      
    
    
      Password
      
        
      
    
    
      Email

Column sizing

As mentioned in the previous example, the grid system allows any number of .cols within a .row. Divide the available width evenly between them. You can also use a specific column class like .col-sm-7 to select a subset of columns to occupy more or less space while the remaining .col divides the rest evenly.

Example

You can edit and try running this code using Edit & Run option.

  
  
  
     Bootstrap - Layout

Auto-sizing

In the below example, use flexbox utility to center the content vertically and change .col to .col-auto. So that the column only takes up as much space as it needs. In other words, the column size depends on the content.

Example

You can edit and try running this code using Edit & Run option.

  
  
  
     Bootstrap - Layout
     
     
     
     
     
  
  
    
      
        Name
        
      
      
        
        
          
          @gmail.com
        
      
      
        Language
        
      
      
        
          
          
            Remember me

Then you can remix again with size-specific column classes.

Example

You can edit and try running this code using Edit & Run option.

  
  
  
     Bootstrap - Layout
     
     
     
     
     
  
  
    
      
        Name
        
      
      
        Username
        
          
          @gmail.com
        
      
      
        Language
        
      
      
        
          
          
            Remember me

Inline forms

To build responsive horizontal layouts use the classes .row-cols-*.
Use gutter modifier classes to have gutters in horizontal and vertical directions.
In narrow mobile viewports, .col-12 is useful for stacking form controls, etc.
To align the form elements at the middle and make the .form-check align properly use the class .align-items-center.

Example

You can edit and try running this code using Edit & Run option.


  
  
     Bootstrap - Layout
     
     
     
     
     
  
  
    
      
        Username
        
          
          @gmail.com
        
      
    
      
        Language
        
      
    
      
        
          
          
            Remember me

Print Page