Bootstrap 4 Input Tutorial With Example

In Bootstrap 4 Input Tutorial With Example, you will learn how to create an input field with Bootstrap. Bootstrap supports all the HTML5 input types: text, password, datetime, date, month, time, week, number, email, url, search, tel, and color.

Bootstrap 4 Input Tutorial With Example

Applying Bootstrap 4 you can create input fieldsInput fields in Bootstrap 4 are sketched to be easy to read and select.

#1: Bootstrap 4 Input

Bootstrap 4 supports 5 form controls:

  • input
  • radio
  • checkbox
  • textarea
  • select

All HTML input types are supported by Bootstrap 4. Inputs will NOT be completely styled if their type is not properly declared.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Input Form</h2>
  <form action="">
    <div class="form-group">
      <label for="usr">Email:</label>
      <input type="text" class="form-control" id="email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" name="password">
    </div>
    <button type="submit" class="btn btn-success">Login</button>
  </form>
</div>
</body>
</html>

The example of a Bootstrap input form will look like below screenshot.

bootstrap 4 input example

#2: Bootstrap 4 Input Textarea

The textarea form control is used to entering larger amounts of texts into the form.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Form Control:textarea</h2>
  <form action="">
    <div class="form-group">
    <div class="form-group">
      <label for="comment">Comment:</label>
      <textarea class="form-control" rows="3" id="comment" name="text"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
</body>
</html>

The example of a Bootstrap input textarea will look like below screenshot.

bootstrap 4 input textarea example

#3: Bootstrap 4 Input Checkbox

Checkboxes are used when a user may select multiple options from a set.

You can use a wrapper element with a .form-check class to ensure proper margins for labels and checkboxes.

Add this .form-check-label  class to label elements, and .form-check-input to style checkboxes properly inside a .form-check container.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Form Control:checkbox</h2>
  <form action="">
  <div class="form-check">
      <label class="form-check-label" for="A">
        <input type="checkbox" class="form-check-input" id="A" name="A" value="something" checked>A
      </label>
    </div>
    <div class="form-check">
      <label class="form-check-label" for="B">
        <input type="checkbox" class="form-check-input" id="B" name="B" value="something">B
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
</body>
</html>

The example of a Bootstrap input checkbox will look like below screenshot.

bootstrap 4 input checkbox example

#4: Bootstrap 4 Input Inline Checkbox

If you require the checkboxes to appear on the same line then use .form-check-inline class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Form Control:checkbox(inline)</h2>
  <form action="">
    <div class="form-check-inline">
      <label class="form-check-label" for="A">
        <input type="checkbox" class="form-check-input" id="A" name="A" value="something" checked>A
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label" for="B">
        <input type="checkbox" class="form-check-input" id="B" name="B" value="something">B
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
</body>
</html>

The example of a Bootstrap input inline checkbox will look like below screenshot.

bootstrap 4 input inline checkbox example

#5: Bootstrap 4 Input Radio Button

Radio buttons are the type of input that is used when you would like to limit the selection to one of the multiple options.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Form Control:radio button</h2>
  <form action="">
  <div class="form-check">
      <label class="form-check-label" for="A">
        <input type="radio" class="form-check-input" id="A" name="optradio" value="A" checked>A
      </label>
    </div>
    <div class="form-check">
      <label class="form-check-label" for="B">
        <input type="radio" class="form-check-input" id="B" name="optradio" value="B">B
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
</body>
</html>

The example of a Bootstrap input radio button will look like below screenshot.

bootstrap 4 input radiobutton example

#6: Bootstrap 4 Input Inline Radio Button

If you want the radio button to appear on the same line then use .form-check-inline class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Form Control:radio button</h2>
  <form action="">
  <div class="form-check-inline">
      <label class="form-check-label" for="A">
        <input type="radio" class="form-check-input" id="A" name="optradio" value="A" checked>A
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label" for="B">
        <input type="radio" class="form-check-input" id="B" name="optradio" value="B">B
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
</body>
</html>

The example of a Bootstrap input inline radio button will look like below screenshot.

bootstrap 4 input inline radio button example

#7: Bootstrap 4 Input Select

Select lists are used if you want to allow the user to pick from multiple options. You can be select one or multiple select from the options.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Form Control:radio button(inline)</h2>
  <form action="">
  <div class="form-group">
      <label for="select1">Select list (select one):</label>
      <select class="form-control" id="select1" name="selectlist1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
      <br>
      <label for="select2">Mutiple select list (select more than one):</label>
      <select multiple class="form-control" id="select2" name="selectlist2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
</body>
</html>

The example of a Bootstrap input select will look like below screenshot.

bootstrap 4 input select example

#8: Bootstrap 4 Form Control Sizing

You can change the size of a form control with .form-control-sm or .form-control-lg.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Form Control Sizing</h2>
<form action="">
    <div class="form-group">
      <input type="text" class="form-control form-control-sm" placeholder="Small form" name="text1">
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Default form" name="text2">
    </div>
    <div class="form-group">
      <input type="text" class="form-control form-control-lg" placeholder="Large form" name="text3">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
</body>
</html>

The example of a Bootstrap form control sizing will look like below screenshot.

bootstrap 4 form control sizing example

#9: Bootstrap 4 Form Control with Plain Text

If you want to style the input field as plain text then use .form-control-plaintext class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Form Control Plain Text</h2>
  <form action="">
  <div class="form-group">
      <input type="text" class="form-control" placeholder="Default form control" name="t1">
    </div>
    <div class="form-group">
      <input type="text" class="form-control-plaintext" placeholder="Form control plain text" name="t2">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
</body>
</html>

The example of a Bootstrap form control with plain text will look like below screenshot.

bootstrap 4 form control plain text example

#10: Bootstrap 4 Form Control File and Range

You can add the .form-control-range class to input type ‘range’ or .form-control-file to input type’file’ style a range control or a file field with full-width.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Form Control Range and File</h2>
  <form action="">
  <div class="form-group">
      <input type="range" class="form-control-range" name="range">
    </div>
    <div class="form-group">
      <input type="file" class="form-control-file border" name="file">
    </div>
    <button type="submit" class="btn btn-info">Submit</button>
  </form>
</div>
</body>
</html>

The example of a Bootstrap form control range and file will look like below screenshot.

bootstrap 4 form control file and range example

At last, our Bootstrap 4 Input Tutorial With Example is over.

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.