Post
Ask Question

How To Create Cards And Forms In Bootstrap 4

Introduction

 
In this article, I am going to explain how to use the Bootstrap 4 Cards and Forms in your project. A card is a flexible container for displaying content in different ways. You can add many styling components to cards like padding, alignment, colors, headings and so on. A form is used to get user information, for the purpose of login or contact details. Bootstrap 4 allows you to create responsive forms in web application.
 
To use Bootstrap 4 in your project, you need to have the following downloaded or CDN scripts. It should be added in the  <head> tag.
  1. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">    
  2.       <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>    
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ></script>    
  4. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>   

Cards

  1. To create outer card container use .card and .card-body classes.
  2. Use .card-title to any heading elements and .card-text to any text elements within the card container. 
  3. Use .card-header and .card-footer for creating header and footer inside the card.
  4. To allign an image used with in the cards use .card-img-top or .card-img-down class to <img> tag.
  5. Use .card-link class to <a> element to display link inside the card.
  6. Use utility classes to change the background and border color of the card.
Add the following code to create the responsive Card in your project.
  1. <div class="row padding">  
  2.        <div class="col-lg-4 col-xs-12" >  
  3.         <div class="cards w3-container " style="@include animation(bounceIn 2s);">  
  4.          <div class="card-imd-top" ><img src="res1.jpg" width="100%"></div>   
  5.           <div  class="card-title "><h2>West-Coast Resort</h2></div>  
  6.            <p class="card-text" >Its Located in the valley of West Bengal Neae Orissa and the Most Special Think about it is its inner location along the valleys of the sunderbans which is known for the food and deserts</p>  
  7.            </div>  
  8.         </div>  
  9.            
  10.           <div class="col-lg-4 col-xs-12">  
  11.         <div class="cards">  
  12.          <div class="card-imd-top" ><img src="res2.jpg" width="100%"></div>   
  13.           <div  class="card-title"><h2>EastCoast Resort</h2></div>  
  14.            <p class="card-text">Its Located in the valley of West Bengal Neae Orissa and the Most Special Think about it is its inner location along the valleys of the sunderbans which is known for the food and deserts</p>  
  15.            </div>     </div>  
  16.           
  17.           
  18.         <div class="col-lg-4 col-xs-12">  
  19.         <div class="cards">  
  20.          <div class="card-imd-top" ><img src="res3.jpg" width="100%"></div>   
  21.           <div  class="card-title"><h2>SouthernCoast Resort</h2></div>  
  22.            <p class="card-text">Its Located in the valley of West Bengal Neae Orissa and the Most Special Think about it is its inner location along the valleys of the sunderbans which is known for the food and deserts</p>  
  23.            </div>     </div>  
Output of responsive Cards in Bootstrap 4
 
How To Create Cards And Forms In Bootstrap 4
 
Responsiveness
 
How To Create Cards And Forms In Bootstrap 4
 

Forms

 
Bootstrap 4 provides several functions of forms. It is used to create consistent and responsive forms. Bootstrap provides three different types of form layouts - horizontal form, vertical form, and inline form. Bootstrap simplifies the process of styling and alignment of form controls through a pre-defined set of classes.
 
To create Forms in Bootstrap 4 add the following classes,
  1. Add class like .form-group to group all controls.
  2. Add class like .form-control to define textual inputs like text, password, email, search, week, time, month, etc.
  3. Add class like .form-control-file to add file inputs.
  4. Add classes like .form-check and .form-radio for checkboxes and radio buttons
Add the following code to create the responsive Card in your project.
  1. <div class="container">  
  2.        <form >  
  3.     <div class="text-center padding"><h2> My Form</h2></div>  
  4.    <div class="form-group row">  
  5.                  
  6.                        <div class="form-row ">  
  7.                <div class="form-group col-md-6">  
  8.                    <label for="firstName" class="form-label col-lg-12">First Name</label>  
  9.                    <input type="text" class="form-control col-lg-12" id="firstName" placeholder="First Name" autocomplete>  
  10.                </div>  
  11.                <div class="form-group col-md-6">  
  12.                    <label for="lastName" class="form-label col-lg-12">Last Name</label>  
  13.                    <input type="text" class="form-control col-lg-12" id="lastName" placeholder="Last Name">  
  14.                </div>  
  15.   <div class="form-group col-md-6">  
  16.                    <label for="email" class="form-label col-lg-12">Email  Id</label>  
  17.                    <input type="password" class="form-control col-lg-12" id="email" placeholder="mail">  
  18.                </div>  
  19.   <div class="form-group col-md-6">  
  20.                    <label for="password" class="form-label col-lg-12">password</label>  
  21.                    <input type="text" class="form-control col-lg-12" id="lastName" placeholder="password">  
  22.                </div>  
  23.     
  24.       <div class="form-group col-lg-12">  
  25.                <label for="comment">Comment:</label>  
  26.                <textarea class="form-control col-lg-12" rows="5" id="comment"></textarea>  
  27.            </div>  
  28.      
  29.             <div class="form-group col-lg-4">  
  30.             <button type="submit" class=" btn btn-primary padding-top">Submit</button>  
  31.             <button type="submit" class=" btn btn-danger padding-top">cancel</button>  
  32.    </div>  
Output of responsive Forms in Bootstrap 4
 
How To Create Cards And Forms In Bootstrap 4
 
How To Create Cards And Forms In Bootstrap 4
 

Summary

 
In this basic article, you saw how to use cards and forms to create a responsive webpage using Bootstrap 4. Hope you found this article interesting. For any feedback, please post your comment at the bottom of this article. Thank you! 


Similar Articles