`Is there a way to hide inline text on small screens using Boostrap 4?`

Within this specific scenario, my goal is to conceal the text when viewed on smaller screens and solely display the icon located to the left (an icon representing comments from font awesome):

<a id="newCommentLink" href="#">
    <i class="fa fa-comments text-secondary"></i> 
    <span class="d-none d-md-inline-block">Comment</span>
</a>

Upon reviewing the provided code snippet, it is evident that I aim for the text 'comment' to be hidden on mobile screens (xs and sm sizes) so it only becomes visible on medium to large screens. Nevertheless, the current HTML implementation showcases the text 'comment' beneath the icon instead of aligning it next to the icon. I am encountering difficulty in making the text display inline with the icon. Is there anyone knowledgeable about resolving this issue and achieving the desired outcome?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Here are a couple of suggestions:

To make the a element flexbox, simply add the class d-flex

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44262b2b30373036253404716a746a74692621302576">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<a class='d-flex' id="newCommentLink" href="#">
  <i class="fa fa-comments text-secondary"></i>
  <span class="d-none d-md-block">Comment</span>
</a>

Instead of using d-md-block, try using d-md-inline-block or d-md-inline-flex

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbdb0b0abacabadbeaf9feaf1eff1eff2bdbaabbeed">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<a id="newCommentLink" href="#">
  <i class="fa fa-comments text-secondary"></i>
  <span class="d-none d-md-inline-block">Comment</span>
</a>

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

Why isn't the sticky element moving up along with its sibling element when scrolling?

This is an additional query related to my previous question How can I make an element sticky but scrollable to its full (variable) height with a sibling element? The issue at hand is that the right sidebar does scroll to its full available content and th ...

htmlcss

Transitioning the CSS background for a lightbox display

I am currently experimenting with creating an image that fades in along with its background when clicked using the :target selector. (Similar to Lightbox: , but done purely with CSS). Here is the HTML: <a href="#firstimg"><img src="img/thumb-3.j ...

htmlcss

What is the best way to eliminate the space between the website's border and the image?

Is there a way to eliminate the space between the left and right borders? I want the picture to fill 100% of the browser window. https://i.stack.imgur.com/gqgOs.png img.test { display: block; outline: 0px; padding: 0px; margin: 0px; } <img c ...

htmlcss

Is there a way to make my DIVS update their content dynamically like buttons do, without manually adding an onclick function in the HTML code?

I am currently customizing a WordPress theme that lacks the option for onclick events on div elements. However, I can assign classes and IDs to them. In my design, I have four spans in a row, and when each span is clicked, I intend for the corresponding p ...

javascripthtmlcsswordpress

How to conceal the day picker in jQuery UI datepicker

I am facing a problem that has been addressed before. As someone with only basic knowledge of CSS, I am a bit confused here. I have two datepickers in my code. <style> .ui-datepicker-calendar { display: none; } </style> Unfortunately, ...

jqueryhtmlcssuser-interfacedatepicker

On three out of five pages, Mozilla Firefox and Internet Explorer are causing extra spacing in my navigation section, yet not on every page

I've been troubleshooting my website and can't seem to pinpoint the issue. I have 5 pages all connected to the same CSS file and created in a consistent manner. Interestingly, Safari, Chrome, and Opera display everything correctly. However, in Fi ...

csspadding

HTML underlay with interactive z-index functionality

Is it possible to create an interactive Google Map with a frame image displayed? <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <input type="button" onclick="$('#frame_image').show();" val ...

htmlcssz-index

Adjust the source of the HTML5 video tag based on the orientation of an iPad

I am currently coding an HTML5 page specifically for iPad Mobile Safari, which includes a video tag for embedding video files. I have successfully implemented CSS3 media queries to determine the orientation of the iPad. My next challenge is to dynamically ...

ipadhtmlvideocssmobile-safari

In the world of MUI, how should one interpret the symbols '&', '>', and '*' when used together?

Currently, I am in the process of building a website using React. To help with this project, I purchased a Material-UI React template. As I was going through the code, I came across the line 4 where it mentions '& > *', and I'm not qu ...

cssreactjsmaterial-ui

Issue with input width percentage not functioning as expected

Is there a special method to specify the width of an input field in CSS without it extending beyond the container? I want my input field to be 98% of the container's width, but when I set it to that, it goes off the screen. This is the HTML code I am ...

csshtmlinputwidth

What is the best way to rerun a script without having to manually refresh the entire webpage?

If you visit greenb.byethost12.com, you can check out the progress I've made so far. Currently, when you click on the correct answer, it triggers document.location.reload(index.php), causing the entire page to refresh. What I aim for is to have only ...

javascriptjqueryhtmlcss

When double quotes are used in a string within an HTML input field, they may display as &

Using PHP, I am retrieving data from an SQL database and generating JavaScript code to create an edit button for each entry. The edit button triggers a text input field within a form. When the user clicks on the generated edit button, the text in this inpu ...

javascriptphphtmlsql

Flashing issues when utilizing the Jquery ui slider within an Angular 2 component

I recently incorporated a jquery-ui slider plugin into an angular 2 component and it's been working well overall, but I have encountered an annoying issue. Whenever the slider is used, there is a flickering effect on the screen. Interestingly, when I ...

csshtmljquery-uitypescriptangular

Concealing a Specific Element with Text using jQuery

Is there a way to conceal the section that includes the element labeled as "Product Tags" on a webpage? ...

javascriptjqueryhtmlcss

Can we integrate Bootstrap 5 icons into Bootstrap 4?

Looking to incorporate Bootstrap 5 icons into a Bootstrap 4 project, as mentioned in the title. This is necessary because I have an older web application that relies on Bootstrap 4 and Font Awesome, and I need it to integrate smoothly with a new Bootstrap ...

csstwitter-bootstrapbootstrap-4layouticons

Top method for individually choosing multiple selections from a foreach loop output

Need help with a loop: foreach ($userItems_get as $item => $value) { if ($value['prefab'] == 'wearable') { echo $value['name'] . "</br>"; echo "<img src=\"{$value['image_invent ...

javascriptphphtmlselectforeach

Script for converting Fixed Positioned Elements to Static

I am frequently finding that elements on web pages are causing disruptions due to their fixed positioning. I am exploring ways to disable the position: fixed CSS rules on any website I visit. To address this issue, I have developed a userscript specifical ...

javascriptcssfirefoxgreasemonkey

Error Message "Alexa.create is not a valid function" encountered while using the Alexa HTML Web API on the Echo Show 10

Here is the HTML code for my custom Alexa Skill. <head> <script src="https://cdn.myalexaskills.com/latest/alexa-html.js"> </script> </head> <body> var alexaClient; Alexa.create({version: '1.0'}) .t ...

javascripthtmlalexa-skills-kit

What could be the reason that I am unable to absolutely position generated content in Firefox?

I am currently designing a horizontal navigation bar and here is the CSS I have used: #topnav { clear: both; overflow: hidden; display: table; } #topnav ul { display: table-row; } #topnav ul li { display: table-cell; vertical-ali ...

cssfirefoxcss-selectors

employing document.write() specifically for a designated division

This is the coding: $(document).ready(function(){ var Jstr = { "JSON" : [ { "Eid" : 102,"Ename":"", "Ecode" : "<input type ='text'/>", "Eprops": {"name": "", "value":"", "maxlength":""}} ] } ; $(".search").click(funct ...

javascriptjqueryhtml