画面幅が狭い時はナビメニューをアイコンのみ表示に切り替えたい

Question

ヘッダのメニューを画面幅によって切り替えたいです。

スマホなど画面幅が狭いときはアイコンのみ。
タブレットやPCなど画面幅が広い時は、アイコン＋文字にしたいです。

「メルカリ」などがそうです。

幅が広い時

幅が狭い時

このような事を実現するのはbootstrapだけで可能でしょうか？
色々検索して探しましたが、それらしい情報を見つけられませんでした。

ちなみに現在は、「Font Awesome」にてアイコン＋文字でメニューを出力してます。

分かる方教えていただけないでしょうか？

<header class="navbar navbar-fixed-top navbar-inverse" id="header_nav">
  <div class="container">
    
    <div class="row">
      <a id="logo" href="/">アプリ</a>
      <form action="/items" accept-charset="UTF-8" method="get" id="header_form">
        <div class="input-group">
          <form action="/items" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
            <input value="" class="form-control" placeholder="何かお探しですか？" id="header_text_keyword" type="text" name="search[keyword]" />
            <input type="hidden" name="search[paused]" id="search_paused" value="false" />
</form>          <div class="input-group-btn">
            <button class="btn btn-default" type="submit" id="header_search_button">
              <i class="glyphicon glyphicon-search"></i>
            </button>
          </div>
        </div>
      </form>
    </div>
  
    <div class="row">
      <nav>
        <ul class="nav navbar-nav navbar-right navbar-dark hoge">
            <li>
              <a href="/categories">
                <i class="fa fa-sitemap"></i>カテゴリから探す
</a>            </li>
            <li>
                <a href="#">
                  <i class="fa fa-bell"></i>お知らせ
</a>            </li>
            <li>
              <a href="/mypages">
                <i class="fa fa-user"></i>マイページ
</a>            </li>
            
        </ul>
      </nav>
    </div>
    
  </div>
</header>

Answer 1

文字部分をspan要素で括ってDisplay propertyで表示を制御するとかでしょうか。

【Display property · Bootstrap】
https://getbootstrap.com/docs/4.0/utilities/display/

<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Comments

[pecchan]

有難う御座います。

初めて知りました。今勉強してます。
取り急ぎお礼まで。

[pecchan]

アドバイス通り、文字をspanで囲み、
それに対して画面幅が狭い時は、display: none;するようにしました！

@media screen and (max-width: 480px){
#header_nav li span{
display: none;
}
}

有難う御座いました！！

[kei344]

CSSを書かなくてもクラスを付けることでできる、という回答ですよ。

【Bootstrap4 displayクラスの使い方を徹底解説 - WEBST8のブログ】
https://webst8.com/blog/bootstrap4-display/

[pecchan]

あ、そういう事だったのですね。
勉強してる内に違う方向へ行ってました^^;

こちらの方が更にシンプルですね！
変更します！