Struggling to properly close the bootstrap tags

Having an issue where I can't seem to properly close Bootstrap tags in my code. Here's a snippet of the HTML:

<html>
    <head>

        <link href="css/bootstrap.min.css" rel="stylesheet">

        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/bootstrap-tagsinput.min.js"></script>

    </head>
    <body>
        <input type="text" id="searchTags" data-role="tagsinput"/>
    </body>
</html>

I'm working with Bootstrap V3.0.

Here is a snapshot showing the issue:

The 'x' button to close the tags is missing from the image. Any thoughts on why this might be happening? Thanks in advance.

htmlcsstwitter-bootstrap

Answer №1

It seems like the issue might be related to a missing css file:

  <link href="bootstrap-tagsinput.css" rel="stylesheet">

Below is the HTML code snippet that includes the necessary links and scripts, along with an example usage of the tags input feature:

<html>
    <head>

    <link href="bootstrap-tagsinput.css" rel="stylesheet">
    <link href="bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="bootstrap-tagsinput.js"></script>

</head>
<body>
    <input type="text" id="searchTags" data-role="tagsinput"/>
    </body>
</html>

(Please note that organizing files into separate js/css folders wasn't considered in this example)

Try incorporating these changes and let me know if it resolves the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to replicate the exact Bootstrap template found on their website

Attempting to replicate a template from bootstrap.com, but encountering issues with the copied version. The navigation bar is turning white instead of remaining black, and I'm unable to change the color. Additionally, facing problems with the toggle ...

javascriptjqueryhtmlbootstrap-4

What is the best way to save newly added elements on a webpage that were submitted by the

I am looking for a way to save the changes made by users on my webpage so that they can navigate to different pages and come back without losing any added elements. These changes should be retained even when the user goes back to edit the webpage, but I pr ...

javascriptjqueryhtmllocal-storage

What is the reason behind having a selectedOptions property rather than just a selectedOption?

Why does the selectedOptions property of select return an HTMLCollection instead of just one HTMLOptionElement? As far as I understand (correct me if I'm wrong), a select element can only have one selected option, so why do I always need to access it ...

javascripthtml

Issue with Attaching Click Event to Dynamic Div Elements

I've implemented divs with a Click Event triggered by a value entered in a text box. See an Example Here Upon opening the page, clicking any rows will trigger an alert. However, if you change the value in the text box (Enter Number) and click load, ...

javascriptjqueryhtml

What are the recommended margins for various alphabets?

When displaying text, some alphabets take up more space than others. So how can I adjust the white space between elements '#re1' and '#re2' automatically in the scenario described below? In this code snippet, what is the best way to ad ...

javascripthtmlcss

Adding text values to an HTML form action

I am working on a form that includes a text input field and a submit button. Is there a way for me to add the value of the text box to the form action URL? For example, can I dynamically change the action attribute to something like: action="https://www. ...

htmlwebforms

Tips on positioning an image at the center of an HTML page

When designing a website, I encountered an issue where only a portion of the image was displaying in the slider due to the fixed height of the div being set to 500. I want the full image to be displayed centered within the same height. <div id="myCar ...

htmlcsstwitter-bootstrap

Concealing content to prevent it from being accessed through HTML and JavaScript inspection techniques

I created a website with a simple guessing game where users can win if they enter the right code. My approach involves using JavaScript: <script> function z() { var b = document.getElementById('idea'); var a = document.g ...

javascripthtml

Creating a dynamic hyperlink based on the selections made in three drop-down menus using HTML code

Currently, I am tinkering with HTML code for a website and aiming to create a link on the website based on selections made in three separate drop-down menus. I am seeking HTML code that will direct users to the following URL: ..../[first menu selection ...

htmlhttp-redirectdrop-down-menu

Set up a cronjob based on the specified time entered in an HTML form

For my HTML form, users enter a time in HH:mm format. I aim to set up a cronjob on the system that will automatically delete a specific file based on the user-provided time. The file itself always remains constant, with only the deletion time varying. Th ...

javascripthtmlnode.jscron

``Considering the compatibility issues with position: absolute in Internet Explorer 8

Here's an example snippet of code in HTML: <form> <input type="file" id="iefile"> </form> <form> <input type="file" id="iefile"> </form> This is how it looks with some CSS styling: form{ position:rela ...

htmlcssinternet-explorer-8

Is there a method to change the name of a file and have it automatically updated in all other locations where it is referenced?

I need to change the name of an HTML file within Visual Studio Code, but this file is referenced in multiple other files. Is there a quick way to do this? Are there any shortcuts that will let me rename the file and automatically update all references in ...

htmlcssvisual-studiokeyboard-shortcutsshortcut

Exploring the implementation of if/else statements in Sass/HTML

I need assistance with customizing the appearance of a save button on my form. The button is currently disabled and appears in blue color, but I would like it to change to a different color until all fields within the form are completed. Even though it c ...

cssangulartypescriptsass

Comparing the use of visibility: hidden with -webkit-transform: translate3d() within a PhoneGap application

Currently, I am creating a hybrid application using PhoneGap. As part of the design, I have several divs (each representing a page) that I toggle between by changing their visibility in CSS using "visibility: hidden" and "visible". However, I recently ca ...

javascriptcsscordova

Exploring robot framework methods for class verification

Are there any specific keywords in Robot Framework that can be used to verify if an element has a particular class assigned to it? Perhaps something like Element should have class element className Or I could also check if the element has a specifi ...

htmlseleniumtestingtddrobotframework

Can anyone explain why my inner div's display is set to block and it is being pushed down when its parent div has

Below is a sample of my HTML+CSS code: <div> <div class="first">text</div> <div>more text</div> </div> div { display: inline; } .first { display: block; } What's interesting is that when the first ...

htmlcss

"Design the website with a WYSIWYG editor while preventing users from disrupting the page's

I am considering using an HTML WYSIWYG editor like CKEditor, but I am concerned about the possibility of users submitting HTML code that could alter the layout of the page when rendered. Here is a comparison between two posts: <p><b>This is m ...

javascriptphpjqueryhtmlckeditor

How can I ensure that my boxes are aligned in a straight line?

I'm having trouble with applying the style="display: inline-block" to each div. Can someone please assist me? https://i.sstatic.net/Gi75l.png Below is my HTML code: <div class="hobby" style="display: inline-block"> <di ...

htmlcssbootstrap-4

Getting the Title value from Selenium in Python: A guide

Can someone provide guidance on how to retrieve the title value from this element using Selenium? I have tried the following code but it is returning an empty string. items = driver.find_elements_by_tag_name("li") for item in items: followe ...

pythonhtmlpython-3.xselenium

Issue with division operation in HTML not functioning

I've been working on a division calculation within an HTML file, but so far I haven't had success using PHP or JavaScript. While {{ property.listprice }} is correctly displaying a number in the HTML file, the other elements are not functioning as ...

phphtml