Issue: The HTML is not displaying correctly when using the Bootstrap framework

I am facing an issue with two bootstrap ul's, where one is properly beautified while the other is not. The problem lies in why the first ul is not rendering correctly and lacking proper spacing. In the fiddle example provided below, you can see that the second ul, which is identical to the first but beautified, has correct spacing...

Same HTML but not beautified

<ul id="handlers-list" class="list-group">
        <li id="GET___asdasd" class="list-group-item"><span>/asdasd</span><span class="label label-primary">GET</span><span class="label label-primary">html</span><span style="display:none;">asdasdasd</span><button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-open" aria-hidden="true"></span></button><button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button><button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></li>
    </ul>

Same HTML but beautified is rendered correctly

<ul id="handlers-list" class="list-group">
        <li id="GET___asdasd" class="list-group-item">
            <span>/asdasd</span>
            <span class="label label-primary">GET</span>
            <span class="label label-primary">html</span>
            <span style="display:none;">asdasdasd</span>
            <button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm">
                <span class="glyphicon glyphicon-open" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-info btn-sm">
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-warning btn-sm">
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></li>
    </ul>

Here is a small js example:

htmlcsstwitter-bootstrap

Answer №1

When it comes to inline elements, any white spaces between them are consolidated into a single space. This makes sense because these inline elements may be mixed in with regular text within the parent element. To achieve the desired outcome, make sure to include spaces or new lines where necessary.

For example:

<li id="GET___asdasd" class="list-group-item"><span>/asdasd</span> <span class="label label-primary">GET</span><span class="label label-primary">html</span> <span style="display:none;">asdasdasd</span> 
        <button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-open" aria-hidden="true"></span>
        </button>

        <button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
        </button>

        <button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
        </button>
    </li>

Answer №2

Your issue might be related to the way your code is structured. Try organizing it similar to the example provided below for it to function properly.

Check out this screenshot for reference

Here's a visual representation of the modifications I made

Answer №3

By utilizing consistent HTML markup as shown in the initial example, any gaps between elements are eliminated effortlessly. However, in contrast, the second illustration showcases spaces within the markup, resulting in impeccably aligned buttons.

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

Tips for sending the output of a Python function to the webpage associated with the clicked action button in Python's Bottle framework

Here is a method I have: @post('/home', method='post') def myFunction(): if(len(request.forms.get('Matrix_dimension').strip()) != 0): length = int(request.forms.get('Matrix_dimension').strip()) tableRow = ...

pythonhtmlbottle

Measure the Gap Between Elements as You Scroll

Utilizing jQuery, I have successfully implemented a functionality to change the position of a fixed div at the top of the screen (top:0) when scrolling reaches a specific point. This involves dynamically switching classes and modifying CSS styles. However ...

javascriptjqueryhtmlcss

Issue with Internet Explorer: Unable to view Drop Down menu

I'm having trouble with the menu I created not working properly in Internet Explorer. Despite being new to HTML/CSS, I followed a tutorial that I found by searching "css drop down menu" and built the menu that currently works great in Firefox, Chrome, ...

cssdrop-down-menumenu

"Struggling with the 2-Column Layout Glitch

I attempted to follow a tutorial for creating a 2 column layout from this person: Here is the result of my implementation: / http://jsfiddle.net/WrpA8/ The CSS: #container { width: 800px; margin: 40px auto; border: 1px solid black; } #header ...

csslayout

DNN's utilization of the HTML5 Object (deprecated Codebase and Codetype)

Forgive me if this is a silly question, but I have a client who doesn't want their Dot Net Nuke skin created in a .ascx format. I've run into a problem. In Dot Net Nuke, you could simply use: <object id = "Name" codebase = "Name" codetype = ...

htmlobjectembeddotnetnuke

I'm wondering, what is the name of this, and how can I recreate it using CSS?

Apologies for the lackluster title, but I'm completely stumped on what to name my creation. I'm looking to put together a list of links (or a menu, without any drop-downs) that has a unique appearance: This example isn't the most attractiv ...

htmlcss

The hamburger icon refuses to close even after being clicked once

Navigation Bar Component import { Link } from 'react-router-dom'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { logout } from '../../redux/actions/auth'; import './Navigati ...

javascripthtmlcssreactjs

Does the padding attribute get passed down in CSS?

Hi there! I've been working on the following code snippet: .blah { padding: 15px; background:green; } .blah div{ background:red; } <div class='blah'> <div> foo </div> & ...

css

Inject a jQuery form submission using .html() into a div element

I am currently working on developing a basic forum where users can view listed topics and have the option to add new ones on-the-fly by clicking a link or image. How can I detect and handle the form submission event for the dynamically added form within an ...

javascriptjqueryhtmlforms

Aligning text vertically alongside an image inside a span tag using CSS

Below is a brief demonstration of the problem I am facing... <html> <body> <span style="border: 1px solid black; background-color: #CCCCFF"> My text <img style="width: 1em; height: 1em; vertical-align: middle;" src= ...

htmlcss

The banner appears unusually compact when viewed on mobile devices

It's about time for me to delve into the intricacies of responsive and adaptive design, but I'm hoping there's a straightforward solution to tackle this issue. Here is my desktop web page as displayed in my browser: https://i.stack.imgur.c ...

htmlcssresponsive-designadaptive-design

What could be causing my JavaScript source to fail to load in an HTML document?

Currently, I am in the process of creating a basic offline dinosaur game using HTML, JS, and CSS that is well-known to everyone. I have been diligently working on it and have successfully made everything function for a few hours. However, out of nowhere, m ...

javascripthtmlsrc

Find images by specific dimensions

A while ago, I received assistance in creating a function that searches for images on Google with specific preset sizes. Now, I am interested in modifying this HTML5 code to allow users to input their desired image size instead of using a preset one. For ...

htmlimagesearchgoogle-image-search

Tips for extracting data by scrolling through a webpage that initially displays only 10 items, but dynamically loads additional items as you scroll down

I am attempting to extract data from the provided webpage by collecting information contained within the title div tag. The challenge I am facing is that as I scroll down, more title tags are dynamically loaded onto the page. Initially, only a few brands a ...

pythonhtmlselenium

Can you provide instructions on creating a button within an ASP UpdatePanel that does not trigger a server postback?

The button functions by opening a dialog page where users can verify a license agreement and select a file through the pathname. However, this selected file value is not utilized in posting or partially posting the form at this stage. Despite numerous at ...

javascriptasp.nethtml

Vanilla JS solution for closing dropdown button

Is there a way to close the dropdown button using Vanilla JS? I have successfully implemented a method to open the dropdown button, but am struggling to find a way to close it. I would like to maintain the for loop for functionality but need guidance on ho ...

javascripthtmlcssdrop-down-menu

Ways to remove information from an HTML form using PHP and MySQL

I'm a beginner in PHP and I've been learning how to add data, but I'm facing difficulties when it comes to deleting data from an HTML form. Here's the code I have so far: Database Name: mydb Table Name: registered HTML <html> ...

phphtmlmysqlforms

Why does the col-sm-* class affect the appearance on extra small screens?

For a current project, I have incorporated bootstrap into my design and have set up varying column widths for xs, sm, and md screens. Initially, I utilized col-xs-* and col-md-* to ensure the columns resized appropriately for xs, md, and lg screens. Howeve ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Enhance your Bootstrap navigation menu with eye-catching hover effects

Hey everyone, I'm a beginner in web development and I'm attempting to incorporate a hover effect into my navigation menu. I want it to look like the first example in this link: https://codepen.io/Calloumi/pen/vndlH I've tried to replicate t ...

htmlcssbootstrap-4

The three.js library encountered an ERROR 404 ( File Not Found ) when trying to import an existing file

Error: GET http://localhost:port/js/three net::ERR_ABORTED 404 (Not Found) I am currently working on a web development project using Three JS. I downloaded the master Zip of ThreeJS from the official website of Three JS I copied the JS files from the Bui ...

javascripthtmlthree.js