How can we avoid line breaks when using "d-md-none" to hide elements in Bootstrap 4 within a <span> tag?

One issue I've noticed with Bootstrap 4 is that using display/hidden classes like "d-md-none" and "d-none d-sm-block" can cause unexpected line breaks, disrupting the design of my website. Is there a way to avoid this problem?

For example, I want the footer to hide "2014-" on smaller screens and only display ©2019. The HTML code below is what I'm currently using:

&copy;<span class="d-none d-sm-block">2014-</span>2019

However, the footer layout ends up looking jumbled, with "©", "2014-", and "2019" split across three lines. How can I address this issue and eliminate the line break caused by Bootstrap 4's display/hidden classes? Any assistance is appreciated...

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

csstwitter-bootstrapbootstrap-4display

Answer №1

Make sure to utilize the inline attribute instead of block

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >

&copy;<span class="d-none d-sm-inline">2014-</span>2019

For more information, visit: https://getbootstrap.com/docs/4.3/utilities/display/#notation

Answer №2

Here to provide assistance:

The use of classes causes the span elements to be displayed as blocks, which positions them one below the other. Have you considered using :

&copy;<span class="d-none d-sm-inline">2014-</span>2019

Perhaps utilizing the inline class instead of block could be more suitable for your needs. Would this be helpful for you?

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 most efficient way to coordinate setting svg attributes together?

I've created a page featuring two svg arrows, and here is the code portion: <div class="button prev-button" v-on:click="prevPage"> <svg class="button-icon" stroke-linecap="round" stroke-width="1" stroke="rgb(0,0,0)" stroke-opacity="0.2" ...

htmlcsssvg

The issue of Bootstrap dynamic tabs retaining their active state even after switching tabs, leading to elements being stacked

For my university project, I am developing a website that resembles a text editor using Bootstrap as the framework. To create the website menus, dynamic tabs have been utilized. The following is the code snippet I have implemented: <!--Bootstrap ...

javascripthtmlcssbootstrap-5

How about linking together CSS3 animations?

Incorporating various classes to animate different elements on my webpage has been my latest project. On page load, I use addClass with jQuery to include these classes. I've been contemplating if there is a method to chain this process. For example, ...

jquerycss

Flex Container Fails to Rearrange When a Flex Item is Dragged Away

Currently, I am using CSS3 flex boxes along with jQuery UI for drag and drop functionality. One issue I am facing is that when I apply justify-content:space-around;, dragging a flex child outside of the container does not cause the remaining items to rear ...

jqueryhtmlcssjquery-uiflexbox

Steps to place a button on the right side of a bootstrap panel

I've been trying to place a delete button on the right side of a Bootstrap panel, but I can't seem to get it to align properly with the panel heading. Can anyone offer some guidance? https://i.sstatic.net/7YvLF.jpg <div class="panel-heading" ...

htmltwitter-bootstrappanel

"Develop a mobile application using PhoneGap designed specifically for use on iPad and

Looking to create an app for iPad and iPad Mini using PhoneGap. While I have some basic knowledge of HTML and CSS, I am struggling with adjusting the image proportion, width, and height of the app. I want to write code that will adapt properly to the vary ...

htmlcsscordova

Difficulty filling height with Bootstrap 4 flex-grow

I am in need of creating a layout with a header div at the top (that can be filled with content), a footer div at the bottom, and a middle div with an adaptable height to fill the entire screen. Check out my code below: <div class="container-fluid p-0 ...

htmlcssbootstrap-4

Tally up the values of selected checkboxes

  I'm in search of a method to tally up data-values associated with checkboxes. In the example provided below, selecting locations from the checkboxes results in the calculation of primary values, which are displayed in the green box. I also need to ...

javascripthtmljquerycssfunction

Seeking a jQuery Carousel with a Blizzard-inspired design

Can anyone recommend a jQuery carousel that has similar features to the one found on Blizzard's homepage? I'm looking for a carousel that is centered, does not show horizontal scroll bars even if the content extends beyond the browser width, supp ...

jqueryhtmlcsscarousel

Learn how to alter the website's overall appearance by changing the background or text color with a simple click on a color using Angular

Is there a way to dynamically change the background color or text color of the entire website when a user clicks on a color from one component to another? I know I need to use the Output decorator, but how can I implement this? style.component.html <di ...

htmlcssangulartypescript

Fade-in effect on one DIV element impacting the values of other div

As a newcomer to jquery and JavaScript, I'm facing some challenges in getting the desired functionality. Currently, I am trying to animate three images simultaneously - one moving downward (iphone), another fading in (shadow), and the third one animat ...

jquerycsshtmlfadeout

Can VueJS bind the SVG fill attribute with url() when using VueJS?

I am facing an issue with dynamically binding the fill attribute of an SVG rect element in VueJS. To illustrate this problem, here is a simple VueJS component that I have created (also accessible on codepen) <template> <div> <!-- this exa ...

javascripthtmlcssvue.jssvg

Adjust the initial slider according to the values displayed in the following four sliders

Having an issue updating the slider value in the first one based on selected values from four other sliders. The selected value should not exceed 50, which is the maximum value in the first slider. Link to Working Fiddle : Below is the HTML code : & ...

javascriptjqueryhtmlcss

Animating a CSS overlay

My goal is to design an overlay using the following HTML and CSS code snippets div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 50%; right: 0; width: 20 ...

htmlcssanimationoverlay

Looking to utilize the <pre> tag without any external CSS styles defined in a separate stylesheet?

In my current project, I am using bootstreap v3.2. I am facing an issue where I need to display fetched content from the database on a page using the <pre></pre> tags. However, the problem is that the content is being displayed with the default ...

htmlcss

Color the area entirely in black

I am currently working on a project for one of my courses, where I have created a website for a specific service. However, I am facing some challenges and things are not going as smoothly as I had hoped. Here is a screenshot of the page: https://i.stack.im ...

htmlcss

What sets bootstrap.css apart from bootstrap-responsive.css?

Can you explain the difference between bootstrap.css and bootstrap-responsive.css? I'm unsure which one is best for creating responsive websites. ...

csstwitter-bootstrapresponsive-design

Adjust the size of the cursor

Currently, I am in the process of creating a drawing application akin to Paint or Sketchpad. One issue I have encountered is the inability to resize the cursor based on the line width of the pencil I am using. The workaround I have discovered involves usin ...

cssangulartypescriptcursorimage-resizing

How can I ensure an element is consistently centered within another element using Bootstrap 3?

I'm currently facing an issue with aligning elements in my center navigation. While keeping the navigation centered is not a problem, I'm struggling with positioning another element to the right of it. This element needs to be displayed in an acc ...

csstwitter-bootstraptwitter-bootstrap-3

What is the best way to test out CSS effects before they go live

I enjoy customizing the CSS, like the posted dates on my portfolio How can I make these changes without affecting the public view of the website? One suggestion from a forum was to use .date {visibility:hidden;} ...

csswordpressdateweb