Prevent line breaks caused by the span tag in Bootstrap 5

I have been attempting to use white-space:nowrap; to prevent the span tag in this text from causing a line break, but so far I have not been successful.

The class styles used here are all standard Bootstrap 5 CSS class styles. On wider screens, the time is displayed below the date with a `<br/>` line break, which is desired. However, on narrower screens, I want the date and time to appear on the same line, with three extra spaces between them. Any suggestions on how to resolve the span/line break issue would be greatly appreciated. The 'carlito' class only sets the font style and color.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4868b8b909790968594a4d1cad4cad4c986819085d6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-12 col-md-3 carlito" style="white-space:nowrap;">
  <h4 class="text-center text-danger">Sunday 28th March 2021
    <span class="d-block d-md-none" style="display: inline-block;">   </span>
    <br class="d-none d-md-block" />11AM - 3PM </h4>
</div>

cssbootstrap-5

Answer №1

To fix the issue, remove the d-block class from your span element. This will prevent the inline property of the span element from being changed to block.

Answer №2

Can you use both d-block and 

style="display:inline-block"
in the same container? Keep it simple by using either a custom style or built-in class.

Is this what you are looking for?

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086a67677c7b7c7a6978483d26382638256a6d7c693a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-12 col-md-3 carlito" style="white-space:nowrap;">
  <h4 class="text-center text-danger">Sunday 28th March 2021
    <span class="d-inline-block d-md-none" >   </span>
    <br class="d-none d-md-block" />11AM - 3PM </h4>
</div>

If yes, then:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb9b4b4afa8afa9baab9beef5ebf5ebf6b9beafbae9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-12 col-md-3 carlito" style="white-space:nowrap;">
  <h4 class="text-center text-danger">Sunday 28th March 2021
    <span class="d-inline-block d-md-block" >   
     11AM - 3PM </span></h4>
</div>

That should work just fine ;)

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

Expansive Carousel Feature with Ng Bootstrap

In my Angular 5 application, I am utilizing the Carousel component from "@ng-bootstrap/ng-bootstrap": "^1.1.2". I am trying to display pictures in full screen but when I press F11, the image appears like this. I am unsure of which CSS properties to apply ...

javascriptcssangularbootstrap-4carousel

Utilize Tailwind CSS to design a triangular shape positioned in the lower right corner of the parent div

Is there a way to position a triangle in the bottom right corner of a parent div without it extending beyond the boundaries? I attempted to use tailwind css for this, but the sides of the triangle are crossing over the parent div. Any suggestions on how to ...

csstailwind-css

Struggling with combining CSS stylesheets?

I am looking to incorporate the vertical timeline feature from CodyHouse into a project utilizing a Bootstrap template hosted on Github. I have successfully transferred the HTML content, however, there are some complications with the CSS files. The issues ...

csstwitter-bootstrapbootstrap-4

I am struggling to remove the div from its normal flow as it stubbornly remains positioned below

Is there a way to add a "contact" card to my website's right-top corner in a sticky position? I currently have a div block in that area which is blocking the contact card. Can anyone suggest a solution for this? https://i.stack.imgur.com/umC7B.jpg &l ...

htmlcsstwitter-bootstrap

Make sure to concentrate on the input field when the DIV element is clicked

In my React project, I am working on focusing on an input element when specific buttons or elements are clicked. It is important for me to be able to switch focus multiple times after rendering. For instance, if a name button is clicked, the input box for ...

javascriptjqueryhtmlcssreactjs

Words with emphasized border and drop shadow effect

I am trying to achieve a specific font style. If it's not possible, I would like to get as close as possible to the desired style. However, due to IE support requirements, I am unable to use text-stroke. https://i.sstatic.net/JwQyb.png The closest a ...

htmlcsssvg

Tips on how to prevent a video from playing in the background of a popup even after it has been closed

After creating a video popup that plays upon clicking a button using jQuery, I encountered an issue where the video continues to play in the background even after closing the popup by clicking the close(X) button. Below is my code, can someone assist me in ...

jqueryhtmlcss

When using CKEditor, pressing the Enter key results in the insertion of <br /> tags

Whenever I use ckeditor, I find that pressing enter results in two <br /> tags being inserted. While I want to keep the line break tags, having them appear twice is not ideal. In my config.js file, I have set the configuration for the enter key as f ...

javascripthtmlcssckeditor

Is there a way to disable the calendar linking feature in the iPhone Mail Client

I am currently working on an application where I generate emails with time stamps. However, when viewing these emails in the iPhone mail client, the timestamp gets turned into a link with an ugly blue color and underline. Is there a way to prevent this fro ...

iphonehtmlcssios

Align the radio buttons vertically

My goal is to align all my buttons vertically, similar to the first question. However, I'm struggling to get the second question to align correctly. Despite trying different methods like using the vertical-align: middle property, nothing seems to be w ...

htmlcssradio-buttonalignment

Visible background between div elements

There seems to be a background color visible between the image divs. I initially suspected it could be related to margins. Even after attempting to set the div to absolute positioning and the parent to relative, the problem persists. The picture still fail ...

htmlcssimagebackgroundposition

Animating an image into a Vue.js div

Is it possible to create a dynamic image animation using Vue.js? I am looking to create an interactive "Add to Cart" experience where when a user clicks on the button, the product's image smoothly glides over to the shopping cart icon before fading a ...

cssvue.jsvuejs2css-animations

The video on mobile is not loading properly, as the play button appears crossed out

There seems to be an issue with GIFs not loading on mobile devices, even though they are implemented as mobile-ready. <video src="/wp-content/uploads/2017/09/5.mp4" preload="metadata" autoplay="autoplay" loop="loop" muted="muted" controls="controls" ...

htmlcsswordpressvideo

Resolving issues with JavaScript caused by Polymer updates

I am a novice when it comes to working with Polymer. From what I have gathered, there seems to be compatibility issues with Mozilla and Safari. After researching on StackOverflow, I found that adding addEventListener('WebComponentsReady', funct ...

javascriptjqueryhtmlcsspolymer

Revamping Tab Styles with CSS

Currently, I am working on a mat tab project. The code snippet I am using is: <mat-tab-group> <mat-tab [label]="tab" *ngFor="let tab of lotsOfTabs">Content</mat-tab> </mat-tab-group> If you want to see the liv ...

htmlcssangularangular-materialangular9

The Visualforce page is not displaying page breaks correctly for cells with rowspan in the table

Having encountered a similar issue to this question: table rowspan page break On my Visualforce page, I have an HTML table with a custom rowspan in one column (varies based on the number of spanned rows) and I'm experiencing a styling problem (see is ...

htmlcsshtml-tablevisualforcepage-break

How to responsively position and scale a background image for a full-width div

Here is the situation: I have an SVG with dimensions of 1920*1920 pixels () This is what I require: I intend to use it as a background-image for a div that spans the full width of the screen. The background image for the div must be responsive. An essent ...

cssreactjssvgbackground-image

Customizing the appearance of the 'Submit' button compared to the <a href=""></a> button using CSS

I am experiencing some issues. Even though the CSS code for these two buttons is exactly the same, their appearance is different. I am unable to make the :hover or :active effects work either. My goal is to have the left 'input type="submit' but ...

htmlcssinputform-submitappearance

What is the procedure for adding a background to a primeNg Tree component?

Working with Angular CLI 6 and primeNg version 6.0.1 I have been attempting to customize the background of the tree component without success. When I try using style="background:red" in the HTML file, the tree display becomes distorted with a height of on ...

htmlcssangularprimeng

Can you point out the syntax error in my flex code?

I'm attempting to redesign my layout grid using flex. It seems that the flex code I commented out is incorrect, possibly due to an issue with setting the width in my .container class. The grid auto property adjusts the columns automatically within my ...

htmlcssflexboxcss-grid