Bootstrap input fields example

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To make an input fields, put the type="text" attribute in an input element it will show the input type fields on a page.

Today, I am going to show you. how to create input fields in bootstrap with code example.

Input fields refer specifically to the text input fields, which are used to obtain data from the users.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Define its class name

This article will guide you to adding input fields in Bootstrap with example.

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

  <meta name="viewport" content="width=device-width, initial-scale=1">

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> 
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

Step 3: Define its class name

After that, create the input fields with a class name type="text".

    <h4>Large input</h4> 
<input class="form-control form-control-lg" type="text" placeholder="Large input">

<h4>Medium input<h4> 
<input class="form-control" type="text" placeholder="Medium input">

<h4>Small input<h4> 
<input class="form-control form-control-sm" type="text" placeholder="Small input">

Example.

Let’s look at the following example to understand how it basically works:

input-fields-in-bootstrap.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
    
<h4>Large input</h4> 
<input class="form-control form-control-lg" type="text" placeholder="Large input">

<h4>Medium input<h4> 
<input class="form-control" type="text" placeholder="Medium input">

<h4>Small input<h4> 
<input class="form-control form-control-sm" type="text" placeholder="Small input">
	
</body>
</html>

Check the output of the above code example.

Bootstrap, Input, Fields

All the best 👍