Skip to content Skip to blog sidebar
  • Contacts
  • Privacy Policy
  • Disclaimer
Schauhan.in |

Schauhan.in |

Technology Updates




  • DESIGNING
    • HTML
    • CSS
  • Bootstrap Examples
    • All Bootstrap Example
    • Bootstrap 3 Tutorials
    • Bootstrap 4 Tutorials
    • Bootstrap Header Templates
    • Bootstrap Footer Templates
    • Bootstrap Login Templates
    • Bootstrap Form Examples
    • Bootstrap Pricing Tables
  • Javascript
  • Website Designing
  • Portfolio
    • Logo Portfolio
    • Website Portfolio
  • Flyer’s Download
    • Night Club Flyer Free Download
    • Festival Flyer
    • Corporate Flyer
    • Digital Marketing Flyer
Home » Bootstrap » Bootstrap Form Examples and Tutorials

Bootstrap Form Examples and Tutorials

Posted on: October 16, 2019 | By: sandeepchhn – Comments Off
Bootstrap Form Bannar, Bootstrap Form

Bootstrap Provides Pre-Defined Classes for All input/select/ and buttons. All Form<input>, <textarea>, and <select> elements with class .form-control have a width of 100%. Included are styles for general appearance, focus state, sizing, and more.

Bootstrap Default Form

<div class="container">
<div class="row">
<form action="#">
  <div class="form-group">
    <label for="Name">Name:</label>
    <input type="email" class="form-control" id="Name">
  </div>
  <div class="form-group">
    <label for="Mobile">Mobile:</label>
    <input type="password" class="form-control" id="Mobile">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>

Bootstrap Inline Form

<div class="container" style="margin-top:20px;">
<div class="row">
  <form class="form-inline" action="#">
    <div class="form-group">
      <label for="Name">Name:</label>
      <input type="Name" class="form-control" placeholder="Name">
    </div>
    <div class="form-group">
      <label for="Mobile">Mobile:</label>
      <input type="Mobile" class="form-control"  placeholder="Mobile">
    </div>
    
    <button type="submit" class="btn btn-danger">Submit</button>
  </form>
 </div>
</div>

Bootstrap Select List and Multiple Select List (With Shift Key Select Multiple Item)

Bootstrap Provides Multiple Select List With its class, Lets know how to Create Multiple Select List in Bootstrap.

<div class="container" style="margin-top:20px;">
<div class="row">
  <form action="#">
   
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select List</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  
  </form>
 </div>
</div>

Bootstrap Checkboxes and Bootstrap Radio Button Examples

<div class="container" style="margin-top:20px;">
<div class="row">
    <h3>Default Checkbox | Form control</h3>
    <div class="checkbox">
     <label><input type="checkbox" value="">Option 1</label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" value="">Option 2</label>
    </div>
    
    <h3>Inline Checkbox | Form control</h3>
    <label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
    <label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
    
    <h3>Radio Button | Form Control</h3>
    <div class="radio">
      <label><input type="radio" name="optradio" checked>Option 1</label>
    </div>
    <div class="radio">
     <label><input type="radio" name="optradio">Option 2</label>
    </div>
    
    <h3>Inline Radio Button | Form Control</h3>
    <label class="radio-inline"><input type="radio" name="optradio" checked>Option 1</label>
    <label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
    
    
 </div>
</div>

Bootstrap Text Area

<div class="container" style="margin-top:20px;">
<div class="row">
  <h3>Bootstrap Text Area</h3>
  <form action="#">
     <div class="form-group">
      <label for="comment">Your Comment Hera:</label>
      <textarea class="form-control" rows="4" id="comment"></textarea>
     </div>
  </form>
 </div>
</div>

Bootstrap Input Groups

In Bootstrap Input Group ( .input-group ) class make form more attractive by adding icons,buttons in input left or right.

Bootstrap Input With Search Icon

<div class="container">
<div class="row">
 <form action="/action_page.php">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search" name="search">
      <div class="input-group-btn">
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
      </div>
    </div>
  </form>
</div>
 </div>
</div>
Filed Under: Filed Under:Bootstrap, Bootstrap Examples, Bootstrap Form
Tagged With: Tagged With:bootstrap 4 form, bootstrap form, bootstrap form template, Bootstrap Form Tutorials, bootstrap login form, login form bootstrap

Post navigation

« Nokia ने लांच किया अपना नया स्मार्टफोन Nokia 6.2
Bootstrap Registration form Template free download »
Avatar for sandeepchhn

About The Author

sandeepchhn
Hello Friend, My Name is Sandeep Chauhan, I am the owner of SCHAUHAN.IN. I Have Passed B.Sc(IT) from Shobhit Univercity Uttar Pradesh, and i have the Diploma of Arena Animation, I Leave in Varanasi Uttar Pradesh.

Related Articles

How to Open Bootstrap Dropdown Menu on Hover

How to Open Bootstrap Dropdown Menu on Hover

Bootstrap Product Cards Templates

Bootstrap Product Cards Templates

How To Create a Notification Button using Bootstrap

How To Create a Notification Button using Bootstrap

Bootstrap Tutorials

  • Bootstrap Jumbotron
  • Bootstrap Button
  • Bootstrap Grid
  • Bootstrap Table
  • Bootstrap Form
  • Bootstrap Alert
  • Bootstrap Wells
  • Bootstrap Badge & Label
  • Bootstrap Panels
  • Bootstrap Pagination
  • Bootstrap Pager
  • Bootstrap Image
  • Bootstrap Glyphicon
  • Bootstrap Carousel
  • Bootstrap Progress Bar
  • Bootstrap List Group
  • Bootstrap Tabs/Pills
  • Bootstrap Navbar
  • Bootstrap Input Types
  • Bootstrap Modals
  • Bootstrap Popover
  • Display property
  • Bootstrap Flexbox
  • Image Replacement
  • Invisible Content
  • Bootstrap Position
  • Bootstrap Scrollspy
  • Bootstrap Border
  • Bootstrap Clearfix
  • Bootstrap Close Icons
  • Bootstrap Colors
  • Responsive helpers
  • Screen readers
  • Bootstrap Sizing
  • Bootstrap Spacing
  • Bootstrap Typography

Website Development in Varanasi

Website Development Company In Varanasi | Website Designing in Varanasi
Website Development Company In Varanasi | Website Designing in Varanasi
Logo Designing In Varanasi
3D Logo Designing in Varanasi
Website Designing in Varanasi
Dynamic Website Development in Varanasi
Wordpress Website Designing in Varanasi
Cheap Website Designing in Varanasi
Cheap 3D Logo Designing in Varanasi
E-commerce Website Designing in Varanasi
Shopping Website Designing in Varanasi
Cheap Wordpress Website Designing



© 2023 Schauhan.in |. All Rights Reserved.  
  • Disclaimer
  • Privacy Policy