VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/how-to-write-a-form-in-different-line-using-bootstrap/

⇱ How to write a form in different line using Bootstrap ? - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

How to write a form in different line using Bootstrap ?

Last Updated : 22 Jul, 2021

Bootstrap is an open-source front-end framework for developing standard & decorative websites or web applications that are fast and user-friendly. Bootstrap includes templates based on HTML and CSS for tables, forms, buttons, etc. Bootstrap also uses JavaScript and helps us to create responsive designs. Forms are a crucial building block of every website. Bootstraps add styling to the forms that give a standard look & feel. This article will give you an idea about how to create a form (Bootstrap Vertical Form) using Bootstrap only.

Rules for the form layout 

  1. For Ideal Spacing, wrap labels and form controls in <div class="form-group">.
  2. Add class .form-control to all textual .form-control class such as input>, <textarea>, and <select> elements.

Before we start to code, we need to include the following stylesheet in the HTML file for loading all CSS.

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

Output: Now, as you can see in the output, we have created a beautifully simple form using Bootstrap, which you can add to your website and will attract viewers to the webpage.

👁 Image
    
Comment

Explore