Bootstrap input tags example

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In the <input> tag, add data-role="tagsinput" attribute to automatically change it to a tags input field.

Today, I am going to show you. how to create input tags in bootstrap with code example.

Table of contents

  • Includes bootstrap library
  • Define its class name

This article will guide you to adding input tags in Bootstrap with example.

Step 1: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.6.0/bootstrap-tagsinput.min.css"/>
          

Step 2: Define its class name

After that, create the input tag with a class name type="text".

        <div class="container">
            <h2>Bootstrap Tags Input</h2>
            <input type="text" value="India,Rajsthan,Utterpradesh," data-role="tagsinput" />
        </div> 

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Tags Input</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.6.0/bootstrap-tagsinput.min.css"/>
        <style type="text/css">
            .bootstrap-tagsinput {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h2>Bootstrap Tags Input</h2>
            <input type="text" value="India,Rajsthan,Utterpradesh," data-role="tagsinput" />
        </div> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.6.0/bootstrap-tagsinput.min.js"></script>
</body>
</html>

Check the output of the above code example.

Bootstrap, Input, Tags

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.

Related Posts