How to input the center in bootstrap?

Hi 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="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="[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">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>input the center in bootstrap</title>
    <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <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....." /> 

Check the output of the above code example.

Bootstrap, input, box

Try the below codesandbox link to customize the above example as per your requirement.

Try it Yourself

All the best 👍

Premium Content

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


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