How to input the center in bootstrap?
February 02, 2023Hi Friends 👋,
Welcome To aGuideHub! ❤️
To input the center in bootstrap, use the class="d-flex justify-content-center". It will input the center in bootstrap.
Today, I am going to show you. how to input the center in bootstrap with code example.
Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Example of input the center in bootstrap
This article will guide you to input the center in bootstrap with an example.
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">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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>Example of input the center in bootstrap
In this example, we will input the center with this code class="d-flex justify-content-center".
Let’s look at the following example to understand how it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>input the center in bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="d-flex justify-content-center">
<div class="col-lg-4 col-lg-offset-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search....." />
</div>
</div>
</div>
</body>
</html>Check the output of the above code example.
Try the below codesandbox link to customize the above example as per your requirement.
All the best 👍