Bootstrap input fields example
June 27, 2022Hi 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.
All the best 👍
