Bootstrap input class example

Hi 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.

Bootstrap, Input, Class

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Stay tuned working on React Js Cheat Sheets Book

Related Posts