Right-aligned button list using Bootstrap

Hello, I've got a Bootstrap list here:

<h4><i class="fa fa-flag" aria-hidden="true"></i> 2</h4>
    <ul id="filter-version" class="filter multiple-select term-list">
        <li data-id="3">
            <a href="#">a</a>
        </li>
        <li data-id="1">
            <a href="#">b</a>
        </li>
        <li data-id="2">
            <a href="#">c</a>
        </li>
    </ul><button class="btn btn-default btn-sm more-less">Więcej</button>

    <span class="btn btn-default btn-sm start-filter" data-filter="version">Pokaż</span>

Any ideas on how to properly align "Więcej" and "Pokaż" to the right? Whenever I use float: right, the buttons end up in line with numbers "1, 2, 3, 4".

Thanks!

http://jsfiddle.net/C2K9Z/156/
htmltwitter-bootstraplistcss

Answer №1

<h4><i class="fa fa-flag" aria-hidden="true"></i> 2</h4>
<ul id="filter-version" class="filter multiple-select term-list">
    <li data-id="3">
        <a href="#">a</a>
    </li>
    <li data-id="1">
        <a href="#">b</a>
    </li>
    <li data-id="2">
        <a href="#">c</a>
    </li>
</ul>
<button class="btn btn-default btn-sm more-less" style="float:right">Read More</button>

<span class="btn btn-default btn-sm start-filter" data-filter="version" style="float:right">Show</span><br/>

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

I'm having trouble getting the float left to work properly in my HTML/CSS code

Currently, I am diving into the world of HTML / CSS on my own. After following some tutorials, I have taken the leap to work on my very first project. My goal is to layout three images and three text elements on a single page using CSS. The desired struct ...

htmlcss

Manipulating JSON objects within a map using jQuery and Gson

I am working with a Java object that contains several nested object fields with basic fields in them. Here is an example: Template { String name; EmailMessage defaultEmailMessage; } EmailMessage { String emailSubject; String emailBody; } ...

javascriptjqueryhtmljsongson

Durable Container for input and select fields

I need a solution for creating persistent placeholders in input and select boxes. For instance, <input type="text" placeholder="Enter First Name:" /> When the user focuses on the input box and enters their name, let's say "John", I want the pl ...

javascriptjqueryhtmldomplaceholder

Ways to customize hover color of Bootstrap 5 Dropdown menu

I'm having trouble modifying the hover color for a dropdown menu using Bootstrap 5. I'm unsure of the correct method to achieve this. The desired outcome is as follows: However, at the moment it appears like this: Apologies for the oversight, h ...

htmlcsswebdrop-down-menubootstrap-5

Obtaining data from an external ng-repeat element

My list contains items that are being repeated using ng-repeat details. I want to be able to hover over one of the li elements and have the background of a div called background (which is outside of the ng-repeat) change to the url of the corresponding d ...

javascriptjqueryhtmlcssangularjs

Utilizing the :after pseudo-element for placing text in a specific location

Here's the code I'm working with: div#myImg{ background: url('myimage.png') left top no-repeat; } div#myImg:after{ content: 'TEXT UNDER IMAGE'; margin:0 auto; vertical-align:text-b ...

css

Update JavaScript variable value when there is a change in the onchange

Greetings, thank you for taking the time to read this. I am currently working with an input that includes a datepicker calendar. This calendar has variables called minDays and MaxDays which allow users to select a specific number of days. In my HTML form, ...

javascriptphphtmlajaxonchange

Troubleshooting issues with sending email with attachments in PHP and HTML

I've been having trouble sending an email with an attachment file; it just doesn't seem to work and I can't seem to receive any files. Although my HTML syntax appears correct, as I haven't received any bounce-back emails, the issue per ...

phphtmlemail

Is there a way to shift the text to a new line within a JLabel without using HTML?

To create a line break in the text of a JLabel without using HTML, you can use the following method: JLabel label = new JLabel("Line\nNext line"); Is there a way to achieve this without relying on HTML? Thank you! ...

javahtmlswingjlabel

The Bootstrap slide function encounters issues within the AJAX success callback

Here's the code snippet with a 'slide' event inside an AJAX success call. success: function(data) { $('#my_container').html(data); // Successfully loading #mycarousel into #my_container $('#mycarousel').bind( ...

javascriptjqueryajaxtwitter-bootstrapbootstrap-carousel

Automatic capitalization of menu options in Bootstrap dropdown

Is anyone else curious about why the menu items are in all caps while the markup is in lower case? What steps can be taken to prevent this from happening? https://i.stack.imgur.com/S86RO.png ...

htmltwitter-bootstrap

Understanding HTML file paths

I'm a beginner here. I've encountered an interesting issue - the file paths for images appear correctly in my index.html file, but not for the background image specified in my css file. Both image files are located in the same directory: Root di ...

htmlcssfilepath

Discovering the presence of line breaks

I have searched extensively on Google, but I am struggling to find a definitive answer. My goal is to create an email simulation where users can input text into a textarea and save it to the database. They should then be able to return to the page later a ...

javascriptjqueryhtml

Adjust the height of a DIV element using Jquery Resizable to a minimum height of 1px, smaller than its default value

Having an issue with the Jquery UI Resizable functionality. I've implemented Jquery resizable to adjust a div's width and height dynamically. It's been working well, but I'm encountering a problem when attempting to decrease the height ...

javascriptjqueryhtmlcss

Keeping your Contact Form 7 perfectly centered on your WordPress website

Currently, I am utilizing the contact form 7 plugin on my Wordpress website. While I have two forms set up, I only want to center align one of them. To achieve this, I initially added the following CSS code in my additional CSS: div.wpcf7 { text-align: c ...

csswordpress

Designing a unique diagonal layout with HTML and CSS

Hey there, I have a question about creating diagonal backgrounds in web design. I've seen websites like Udacity and one my friend is working on that feature diagonal shapes or designs in the background. I'm curious about how to achieve this effec ...

javascriptjqueryhtmlcsstwitter-bootstrap

Restrict allowable dates according to user preference

In my Leave request form, employees can request various types of leaves such as paid leave, unpaid leave, and leave for blood donation. These types are stored in a Mysql table and displayed in a dropdown using the following code: <div class="form-g ...

javascriptphphtml

Error in Javascript: Null Object

I have created an upload page with a PHP script for AJAX, but I'm encountering errors in Firebug. Also, the upload percentage is not being returned properly. Currently, I can only do one upload in Firefox and the script doesn't work in Chrome. H ...

phpjavascripthtmlajaxupload

Troubleshooting fixed footer printing on HTML pages in Firefox and Chrome

Hey everyone, can someone help me out with CSS? I'm trying to create a printed HTML page with a header and footer. The footer needs to stay at the bottom of the page and if there's a second page, it should also appear at the bottom. I have a demo ...

htmlfirefoxgoogle-chromepositioning

Guide for including a script reference in an HTML file through a Windows .BAT file

Looking to add a script reference to an HTML file using a Windows .BAT file Here's the code I've attempted: for %%f in (*.txt) do ( for /f "eol= delims=" %%v in (%%f) do ( if "%%v"==">Line-X" ( echo %%v>> %%f2 echo ^& ...

htmlbatch-file