What is the best way to include a final tag on its own line?

I'm trying to add a new line for "Payment Remaining", but it doesn't go to the next line as expected.

I need the final text to be on a separate line, Payment Remaining

#authorization-wizard-start-work .btn-group label.active {
  color: #0094ff;
}

#authorization-wizard-start-work .btn-group label.active {
  color: #0094ff;
}
<main class="col-4 text-right pt-3">
  <div class="dropdown">
    <a href="#" class="btn btn-light btn-sm btn-xs font-weight-bold menu-dropdown" data-toggle="dropdown"><i class="fal fa-sliders-h mr-2"></i>&nbsp;Filters</a>
    <div class="dropdown-menu p-3 listing-filter">
      <div class="text-center">
        <div class="btn-group btn-group-toggle">
          <label class="btn btn-white btn-sm btn-xs">
                    <input type="checkbox" class="custom-control-input" name="filter-auth-status" value="0">
                    Payment New 
                    </label>
          <label class="btn btn-white btn-sm btn-xs">
                    <input type="checkbox" class="custom-control-input" name="filter-auth-status" value="100">
                    Payment In Progress
                    </label>
          <label class="btn btn-white btn-sm btn-xs">
                    <input type="checkbox" class="custom-control-input" name="filter-auth-status" value="99999">
                    Payment Deleted
                    </label>
          <label class="btn btn-white btn-sm btn-xs">
                    <input type="checkbox" class="custom-control-input" name="filter-auth-status" value="900">
                    Payment Authorized
                    </label>
          <label class="btn btn-white btn-sm btn-xs">
                    <input type="checkbox" class="custom-control-input" name="filter-auth-status" value="200">
                    Payment Submission
                    </label>
          <label class="btn btn-white btn-sm btn-xs">
                    <input type="checkbox" class="custom-control-input" name="filter-auth-status" value="300">
                    Payment Remaining
                    </label>
        </div>
      </div>
    </div>
  </div>
</main>

https://i.sstatic.net/qoyvn.png

htmlcss

Answer №1

Just insert a line break before the label tag for Payment Remaining.

Answer №2

There seem to be a couple of issues in your code. It is not recommended to nest the input within the label. Also, to apply CSS styles to each input label pair collectively, consider assigning them to a common class.

Take a look at this straightforward example:

#authorization-wizard-start-work .btn-group label.active {
    color: #0094ff;
}

#authorization-wizard-start-work .btn-group label.active {
    color: #0094ff;
}

.field {
    display: inline-block;
}

.field:last-child {
    display: block;
}
<div class="btn-group btn-group-toggle">
    <div class="field">
        <label class="btn btn-white btn-sm btn-xs"> Payment 1</label>
        <input type="checkbox" class="custom-control-input" name="filter-auth-status" value="0">
    </div>
    <div class="field">
        <label class="btn btn-white btn-sm btn-xs"> Payment 2</label>
        <input type="checkbox" class="custom-control-input" name="filter-auth-status" value="0">
    </div>
    <div class="field">
        <label class="btn btn-white btn-sm btn-xs"> Payment 3</label>
        <input type="checkbox" class="custom-control-input" name="filter-auth-status" value="0">
    </div>
    <div class="field">
        <label class="btn btn-white btn-sm btn-xs"> Payment last</label>
        <input type="checkbox" class="custom-control-input" name="filter-auth-status" value="0">
    </div>
</div>

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

What strategies can be used to avoid a single dangling word at the end of a line within an HTML element?

I am in the process of developing a straightforward webpage with marketing content. One aspect I find unfavorable is when a line of text stretches too long and breaks onto the next line, which is acceptable; however, it often splits in a manner where there ...

htmlcssformatting

Move the Bootstrap button to the right side of the div, extending beyond its boundaries

My bootstrap page seems to be experiencing an issue where the buttons within a div are shifted slightly to the right without any clear reason: https://i.sstatic.net/3xlMC.png https://i.sstatic.net/yFLFM.png https://i.sstatic.net/gh686.png The div in qu ...

htmlcssbootstrap-4

javax.el.MethodNotFoundException: JSP method cannot be located

While compiling the JSP template, I encountered the following exception: The method getFriendImage() is not recognized I attempted to rebuild the class without success. The src attribute contains a valid link to an image that is functioning properly. ...

javahtmlcssjsp

Spinning divs using JavaScript when the mouse hovers over them, and then returning them to their original position when the mouse moves

I am looking to create a functionality where a div rotates when the mouse enters it and returns to its original position when the mouse leaves. Everything works fine when interacting with one div, but as soon as I try hovering over other divs, it starts gl ...

javascriptjqueryhtmlcss

Mobile display exhibiting glitches in animation performance

I have implemented an animation in the provided code snippet. const logo = document.querySelector('.logo'); const buttons = document.querySelectorAll('.loadclass'); const html = document.querySelector('html') const cornerme ...

javascripthtmlcss

Bullet points colliding with one another

Is there a way to display an unordered list with list items in two rows and multiple columns without the bullet points overlapping? I have tried adjusting margins, but is there a more elegant solution to this issue? The requirement is to maintain the bul ...

htmlcssflexbox

Uploader and viewer tool for HTML5 documents

My website is currently built using PHP and allows users to add and view documents. The current upload process is basic, requiring users to manually input information and then view the document with minimal formatting on a webpage. I am looking to upgrade ...

htmldocumentdocumentviewer

Responsive Bootstrap 4 navigation bar featuring collapsible menu and various elements displayed on the right side

I have been struggling for quite some time to create a mobile menu using Bootstrap 4. My goal is to display the 3 brand names and the toggle button on the same row in the mobile menu. However, when I click the toggle button, the 3 brands end up below the c ...

htmlcsstwitter-bootstrapbootstrap-4

Is browser rendering performance affected by wrapping everything in a div?

Let's consider a scenario where I have an HTML page with the following simplified content within the body: <div class="wrapper"> <div class="block1"></div> <div class="block2"></div> <div class="block3"></ ...

htmlperformancebrowser

Compel the system to handle the file as if it were an

I am currently showcasing programming files on a website in plain, raw text format. I have now decided to implement syntax highlighting using HTML. While it has enhanced the appearance and functionality of the files, there is one issue - I need to create a ...

html

Adjusting Media Queries according to the browser window's zoom level

Is there a way to detect the browser width dynamically? For instance, can I adjust the CSS styling based on zoom adjustments like ctrl + or ctrl -? By "box," I am referring to a perfectly square shape. So, when the browser width is 100%, I want a layout wi ...

javascriptjqueryhtmlcss

Unleashing the power of Sass and CSS in your Next Js project

Trying to incorporate sass and css modules into my next.config.js has been challenging due to an error I keep encountering: Failed to compile. ./node_modules/@riskalyze/react-ui/node_modules/@riskalyze/calendar/assets/index.css Unknown word (1:1) > 1 ...

csssassnext.jscss-loader

Having trouble with adding the copy to clipboard feature

I'm having trouble implementing a copy to clipboard option on my color selector. The goal is to display the selected color on an h3 tag and create a background color generator. Each time a color is chosen, it should appear on screen for us to easily c ...

javascripthtml

Ways to showcase an icon within a select options tag

Is there a way to show Font Awesome icons in select options tag? I have tried using it outside like this <i class="fas fa-chart-pie"></i> But I'm not sure how to display it within the <option> tags instead of text. <select id="s ...

htmljquerycssbootstrap-4html-select

When it comes to creating a CSS drop-down menu, don't forget to incorporate an additional <ul

I've created a drop-down menu using CSS with 5 visible list items. When hovering over one of the list items, it highlights and triggers a drop-down effect to display another list underneath. Essentially, you have an initial set of options, and upon ho ...

htmlcss

Struggling to find solutions for debugging HTML codes in Visual Studio Code and linking my CSS page to my HTML page

I ran into some issues with linking my CSS stylesheet to my HTML pages. I tried using the <link rel="stylesheet" href="style.css"> command, where style.css is the name of the file. However, for some reason, it wasn't working ...

htmlcssdebugginglinker

Creating a legitimate svg element using javascript

While working with SVG, I had an issue where I added a <rect> element directly into the svg using html, and then created a new element (without namespace) <circle> with javascript. However, the <circle> element did not display in the svg ...

javascripthtmlsvgconstructorconsole

Is there a way to adjust paragraph sizes in CSS flexbox so they scale with the font size?

After spending hours trying to figure this out on my own, I finally caved and registered on StackOverflow. Despite Google providing plenty of related questions and examples, I still can't find a solution to my specific problem. The issue at hand is c ...

htmlcssflexbox

"Unfortunately, SimplyScroll isn't functioning properly on this particular page

What is the reason for simplyscroll not being able to handle this div with nested divs? EXTRA INFORMATION The scrolling functionality does not work. Clicking on the buttons doesn't trigger any scrolling. Changing the contents of the div to plain tex ...

javascriptjqueryhtmlsimplyscroll

Setting the height of children within an absolutely-positioned parent element

I am facing an issue with adjusting the size of children elements based on their parent. The scenario is as follows: HTML <div class="video"> <div class="spot"> <img src="..." alt=""> <button>x</button> </div ...

htmlcsscss-position