Bootstrap input class example
June 22, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To input class, put the class="input-group" class to create an input class in bootstrap for example.
Today, I am going to show you. how to create input class in bootstrap with code example.
Table of contents
- Includes bootstrap library
- Define its class name
This article will guide you to adding input class in Bootstrap 4 with example.
Step 1: Includes bootstrap library
First of all, load the Bootstrap 4 framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">Step 2: Define its class name
After that, create the input calss with a class name .class="input-group".
<div class="container">
<h3>Bootstrap Input Class example</h3>
<!-- Declare an input group -->
<div class="input-group">
<!-- Prepend the following content to the input box -->
<div class="input-group-prepend">
<!-- Define the text content of the group -->
<span class="input-group-text" id="username">@</span>
</div>
<!-- Declare an input box -->
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
</div>
Example.
Let’s look at the following example to understand how it basically works:
input-class-in-bootstrap.html
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Input class in Bootstrap</title>
</head>
<body>
<div class="container">
<h3>Bootstrap Input Class example</h3>
<!-- Declare an input group -->
<div class="input-group">
<!-- Prepend the following content to the input box -->
<div class="input-group-prepend">
<!-- Define the text content of the group -->
<span class="input-group-text" id="username">@</span>
</div>
<!-- Declare an input box -->
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
</div>
</body>
</html>Check the output of the above code example.
All the best 👍