Align two span elements to the right using Bootstrap's float-right class

My task is to align two span elements, one with the Bootstrap 4 class 'close' and the other with class 'badge', to the right. However, whenever I try to float the badge to the right, they end up right next to each other. On the other hand, if I use clear: right, the badge falls to the end of the div.

Here is the structure I am aiming for:

https://i.sstatic.net/YSMyK.jpg

Below is the HTML code I have constructed so far:

<div class="card">
  <div class="card-header">
    <span class="close">x</span>
    <img src="image.png">
    <h1 class="card-title d-inline">Title</h1>
    <span class="badge badge-default d-inline">Badge</span>
    <h2 class="card-subtitle">Subtitle</h2>
  </div>
</div>

Is there a way I can achieve this layout using Bootstrap 4? Any assistance is appreciated. Thank you!

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

To create space around the badge, you can utilize margin or padding in the styling.

<div class="card">
    <div class="card-header">
        <span class="close">x</span>
        <span class="badge badge-default float-right m-2">Badge</span>
        <img src="//placehold.it/40">
        <h1 class="card-title d-inline">Title</h1>
        <h2 class="card-subtitle">Subtitle</h2>
    </div>
</div>

EDIT

If you're aiming for a layout similar to the image provided, simply using float-right won't suffice. You should leverage the spacing utilities to correctly position the elements.

<div class="card">
    <div class="card-header pt-0">
        <div class="w-100 text-right close">x</div>
        <img src="//placehold.it/60" class="float-left mt-2 mr-2">
        <span class="badge badge-default float-right mt-2">Badge</span>
        <h1 class="card-title my-0"> Title</h1>
        <h2 class="card-subtitle d-inline-block">Subtitle</h2>
    </div>
</div>

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

Answer №2

Have you considered experimenting with crafting a fresh div and inserting "Close" and "Badge" within it? By floating the div to the right, you may be able to achieve the desired layout. Let me know how it turns out! 😉

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

The hover CSS effect in the dropdown menu does not apply to sibling elements, but does work on descendant elements

Below are two sets of code for creating a dropdown menu. Although similar, the codes have a slight difference. In both cases, I have assigned classes to the main list item and submenu. The main heading has been given the 'heading' class with an a ...

htmlcssdrop-down-menu

Responsive div that reacts to scrolling

I am looking for a div that can dynamically change its position as I scroll up or down the page. For example, it could start 30px from the top but then move to 100px as I scroll down further. This div will be located on the right-hand side of my page, clo ...

javascriptjqueryhtmlcss

Style the nth child of a particular type in CSS with a unique color scheme

Is there a way to select the nth child of type and apply different colors without assigning IDs because they are dynamically generated in a loop from a template engine? I found some useful information on this topic here: https://www.w3schools.com/cssref/ ...

htmlcss

What is the best way to make sure that the parent div of an svg shows its shadow on top of the svg itself?

I am in the process of creating an interactive world map using an SVG map. The SVG format is necessary because I have implemented functionality to zoom in and move the map around. However, a challenge has arisen: the SVG element is obstructing the shadow o ...

htmlcsssvg

Modify the contents of the 'data-content' area in the popover

Looking for a solution where I can update only a portion of the data-content within a popover. Here is an example code snippet: <div class="popover-wrapper"> <i class="glyphicon glyphicon-question-sign hover_content" ...

javascripthtmljquery

Just starting out with JavaScript - updating the appearance of an element

Based on the value of a boolean, I am looking to control the visibility of specific tabs in my sidebar when the page loads. var someVar = true; function show_ifTrue() { if (Boolean(someVar) == true) { document.getElementById('x'). ...

javascripthtmlcss

What is the functionality of `first-child` when used with custom variants in Tailwind CSS?

I've been wrestling with understanding the first-child pseudo selector and after studying through this interactive example, I'm feeling quite bewildered. <div class="[&:first-child]:text-red-500"> <ul> <li>ab ...

csstailwind-css

The simple method for incorporating line feed in <s:textarea>

Hey there, I'm currently utilizing struts 2 UI and I seek a means to restrict the number of characters in each row to only 16. Additionally, I want to impose a maximum length limit of 32 characters. Despite my attempts using the 'row' and &a ...

htmlstruts2

Adjusting the width of an image in Safari

I just launched my website, but I encountered an issue with the image size in Safari. In my CSS, I set the width like this: img { width: 450%; } Here is the site: I can't figure out why the images display correctly in Chrome and Mozilla, but ...

csssafarisass

Converting a table into JSON format

I'm working on developing a live application that will showcase data in a table format like the one below: Machine Production Scanned Delta Mach 1 2500 1000 1500 Mach 2 1500 1300 200 Mach 3 6500 5000 1500 Mac ...

pythonhtmlsqljson

How can we incorporate interactive icons into the navigation bars on our Weebly site?

Recently, while using Weebly to design a website, I stumbled upon a webpage () that explains how to add icons to the navigation bar. Below is the code provided: /* External Fonts */ @font-face { font-family: 'dashicons'; src: url('fonts/ ...

htmlcssfrontendweebly

Adjust the content of a table cell using jQuery

<td>09 Mars 2020</td> Using the string above, I have created a div. Here are the Jquery variables I am working with: date1 = 09 Mars 2020 date2 = 18 Mars 2020 My goal is to combine the content from another date with the existing date to ach ...

javascriptjqueryhtml

"Creating a cohesive design: Using CSS to ensure the navigation background complements

I am working on a project with a horizontal navbar that I want to stay fixed while scrolling. The main window has different colored divs as you scroll down, and I would like the navbar to match the image of the main div while scrolling, creating a looping ...

javascriptjqueryhtmlcss

Unable to view image when using material-ui CardMedia component

Hello, I've encountered a problem with rendering an image in my application. Let me explain the issue in a simplified manner. So, I have a card component (MyCardComponent) where I need to pass a string prop containing the image file location. The goa ...

javascriptcssreactjsmaterial-ui

What is the purpose behind jade disregarding line breaks and spaces when rendering code?

Utilizing Jade, I am generating HTML by executing the code var generateCodeBlock = jade.compile('div !{text}', {pretty: true});. My aim is to create the following: <div> var json = { labelA: 'a', labelB: 2 ...

javascripthtmlnode.jstemplatespug

The html carousel displays stacked images instead of scrolling

I have been staring at this code for what feels like an eternity, trying to figure out why it's only displaying stacked pictures instead of a functioning carousel. Perhaps I overlooked something crucial. Could someone please lend a hand? My code is pr ...

javascriptjqueryhtmlcarousel

Sorting table by priority in HTML is not functioning as expected

I am currently developing this code for a SharePoint 2010 platform. While the table can currently be sorted alphabetically, I am looking to implement a different functionality. Unfortunately, I am facing an issue with changing variables 'a' and ...

javascripthtmlsortinghtml-table

Is it possible to display a div when hovering over it and have it remain visible until

How can I make the div ".socialIconsShow" fade in when hovering over ".socialIcons", and then fade out when hovering over ".socialIconsShow"? Is there a way to keep the icons visible even after leaving ".socialIcons"? <div class="socialNetworks"> ...

jquerycsscss-sprites

The link that has been clicked on should remain in an active state

Is there a way to make the link that is clicked on active? I have attempted various scripts but have had no luck in getting the desired effect. Can anyone identify what might be causing the issue? $("a").click(function () { if ($(this).hasClass("acti ...

javascripthtmljquerycss

Creating dynamic email templates in Node.js

I am working on a project using the MEAN stack and I need to implement email functionality. I have created separate email templates, but I want to include a common header and footer in all of them. Route.js router .route('/api/user/register&a ...

javascriptnode.jshtmlexpressmean-stack