For this particular application, I am trying to hide the text on smaller screen and only show the icon on the left (a comment icon from font awesome):
<a id="newCommentLink" href="#">
<i class="fa fa-comments text-secondary"></i>
<span class="d-none d-md-block">Comment</span>
</a>
As you can see from the above code, what I want is that the text 'comment' to be hidden on mobile screens (xs and sm size) so it only shows up on medium to large size screens. However, this HTML code will display the text 'comment' below the icon, rather than being next to it. I am unable to inline the icon and the text. Anyone knows how to fix this problem, to make the text display inline with the icon?
A few options:
Simply use d-flex on the a
<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/bootstrap@5.0.0-beta2/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>Use d-md-inline-block / d-md-inline-flex instead of d-md-block
<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/bootstrap@5.0.0-beta2/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>