_problem with text formatting in bootstrap 4 template

I am having trouble formatting a 2-line text

Right now, it appears like this

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

I would like it to display like this

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

This is the HTML code I'm using with bootstrap

<label for="checkbox-group-1588093203851" class="radio-group-label">
<span class="mr-2">2.1.2</span> For the purposes of serving its clients, does the Reporting Firm maintain ongoing relationships with regulated financial institutions or other regulated professional service providers (e.g. referrals)?
<span class="formbuilder-required">*</span>
<span class="tooltip-element" tooltip="This does not include business operating accounts at financial institutions or professional services acquired for the functioning of the entity itself (e.g. legal advice to the entity, accountancy services for the entity, etc.).">?</span></label>
htmlcssbootstrap-4

Answer №1

If you're working with Bootstrap 4, you can easily include the class d-inline-flex to the label and enclose the question text in another span, ensuring that there are only two direct children within the flex container of the label.

Take a look at the revised HTML below:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<label for="checkbox-group-1588093203851" class="radio-group-label d-inline-flex">
  <span class="mr-2">2.1.2</span>
  <span>
    For the purposes of serving its clients, does the Reporting Firm maintain ongoing relationships with regulated financial institutions or other regulated professional service providers (e.g. referrals)?
    <span class="formbuilder-required">*</span>
    <span class="tooltip-element" tooltip="This does not include business operating accounts at financial institutions or professional services acquired for the functioning of the entity itself (e.g. legal advice to the entity, accountancy services for the entity, etc.).">?</span>
  </span>
</label>

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 is the best method for deleting a table row after it has been removed from the database using ajax?

After trying to integrate $tr.find('td').fadeOut(1000, function () { $tr.remove(); into my deletion function for removing a row upon clicking the delete button, I realized it wasn't functioning as expected. func ...

jqueryhtmlajaxasp.net-mvcasp.net-ajax

The enigmatic discrepancy in height across various browsers

I have encountered an issue with the layout of my HTML document. Both the BODY and HTML elements are set to a height of 100%. Within these elements, I have two child elements - one with a fixed height of 100px and the other set to height:100%. However, th ...

htmlcss

Thrilling visual loops in motion with CSS animations

Currently, I am working on developing a captivating 'pulsating rings' animation that revolves around a circular image with the use of CSS animations. The image itself is a circle measuring 400px in width. Although I have successfully implemented ...

htmlcsscss-animations

Can you explain the process of performing subtraction with parseInt in JS using Ionic 5 and Angular?

Currently, I am developing a point-based question game using Ionic 5 with Angular. Previously, I sought assistance on getting the addition button to function correctly and it worked perfectly. However, when attempting to implement the same logic for subtra ...

javascripthtmlangularionic-frameworkparseint

Troubles arise when attempting to load the imported Segoe UI semilight font in CSS

Segoe UI semlight is a font created specifically for Windows 7 that I adore. In fact, I am currently developing a web application and decided to use this font in it. However, I encountered an issue when trying to make the font compatible with other opera ...

htmlcssfonts

Ways to integrate Bootstrap with Spring MVC for enhanced functionality

After creating Bootstrap HTML files in Bootstrap Studio, I structured them as shown in the following image: https://i.sstatic.net/NMAU5.png Next, I moved all these files to the WEB-INF/view folder in my Spring project and changed them to JSP format. I se ...

javaspringspring-mvcbootstrap-4

Utilizing CSS property { white-space: nowrap } in Outlook for better formatting

Currently I am facing an issue with column widths in a report that I am generating dynamically and emailing directly out of SQL. The HTML for the report is being generated dynamically but there seems to be a problem with the column widths. I have added th ...

htmlcssemailoutlook

How can we call a function in HTML from an external JavaScript file?

I am attempting to utilize a function that I have defined in my .js file within my HTML document. js/newsalerts.js function decodeHTML(html) { //https://stackoverflow.com/a/2989105/4650297 var tempDiv = document.createElement("DIV"); tempDiv. ...

javascripthtmlflask

Creating a "return" button for an editing form in AngularJS Datatables with the help of a form directive

Using AngularJS Datatables, I implemented a grid with additional "edit" and "delete" buttons in the last column. How is the grid/table rendered? HTML <!-- Required CSS and JS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/li ...

javascripthtmlangularjsangularjs-directive

Is it possible to display a pdf.js page as actual HTML elements rather than as canvas or SVG?

I am in the process of creating a user-friendly mobile interface for pdf reading. However, I want to incorporate more advanced features by developing my own pdf reader instead of relying on the pdf.js team's viewer. Is there a method available to rend ...

javascripthtmlhtml5-canvaspdf.jspdfjs-dist

Guide on utilizing getelementsbytagname for retrieving LI values

As I attempt to locate a specific product on amazon.com, my goal is to extract the ASIN for each item. This particular code snippet runs through various search options and retrieves the price of each product from Amazon one by one. However, in addition to ...

javascripthtmlvbaexcel

Bootstrap 4 ordering feature is non-functional

I am looking to rearrange the layout for Desktop and mobile devices, currently this is how it's structured: On Med+ : https://i.sstatic.net/E9ZHo.png On small: https://i.sstatic.net/VG6j1.png The placement on Desktop is fine. However, on mobile I ...

cssbootstrap-4frontend

Linking for default and French page internationalizations

Currently, I am working on SEO for a multi-language website that includes English, French, and Spanish versions of the web pages. For example, the English pages are located at example.com/en and have English content as default. <link rel="alternate" hr ...

htmlseomultilingualrel

Is it true that iframe doesn't function as createpopup does?

I decided to use an iframe over window.createPopup, but I'm encountering an error in the console saying "oDocument is not defined". Check out my code below: function ShowDropdown(oMenu, oMenuDropDown){ //Setting up iframe html var iframe='<i ...

javascripthtmliframe

Issue encountered during registration for the pset9 cs5 (unforeseen exceptions)

"successfully registering a user causes an exception in the application (refer to the log for more details)" "registration is rejected due to duplicate username causing an exception in the application (refer to the log for more details)" ...

javascriptpythonhtmlcs50

Adjusting HTML/CSS for various screen sizes and devices

I have designed a website, but when it is viewed on devices like iPad or iPhone, the layout does not adjust to fit the screen properly. The text box containing my name and social media buttons appears on the left side, while the background image is positio ...

htmlcss

How can I format the initial letter in the primary link within the initial list using CSS?

It's no surprise that the CSS isn't cooperating, but I'm hoping you can grasp the concept. There are two lists and my aim is to style the first letter of the first a in the initial ul. In this instance, it would be the B in Beauty Salons. Is ...

csspseudo-element

Creating duplicates of a division and updating the identifiers of each element within the duplicated divisions

In the midst of a django project, a specific requirement is to add a button on the HTML page that, when clicked, duplicates a specific div and attaches it to the bottom of the page. The desired outcome is illustrated in the following image: View Screenshot ...

javascriptjqueryhtmldjango

Guide on loading a div with a flash object without showing it on the screen (element is loaded but remains hidden)

Is there a way to achieve an effect that is somewhere between using display: none and visibility: hidden? Specifically, I am trying to have a div element (containing flash content) loaded but not displayed on the page. Just for clarification: I have embed ...

javascripthtmlcssflashswfobject

How to insert text into a text input using onKeyPress in react.js

I am looking to simulate a typing effect where the phrase 'Surveillance Capitalism' is inputted letter by letter into a text input field as a user types. However, I encounter an issue when trying to add each individual letter into the input; I re ...

javascripthtmlreactjs