Bootstrap collapse icons


Is it possible to make Bootstrap change the navbar list from text to icons from the browser re-sizing instead of making it into a collapse drop down?

For example, make example 1 turn into example 2 just from the browser re-sizing.

Example 1:

  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>

Example 2:

  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
      <li><a href="#about"><span class="glyphicon glyphicon-info-sign"></a></li>
      <li><a href="#contact"><span class="glyphicon glyphicon-envelope"></a></li>


Sure, add some css like this:

.nav .glyphicon {
        display: none;
@media screen and (max-width: 300px){
    .nav .text {
        display: none;
    .nav .glyphicon {
        display: inline;

Then update your lis to have a span for both text and the icon:

    <a href="#"><span class="text">Home</span><span class="glyphicon glyphicon-home"></span></a>

The @media styles specify that when the screen width is 300px or less, then hide the text and show the icon. The icon is hidden by default.

I’ve updated your fiddle to have the switch working. Here’s what I did:

  • Removed the button in your navbar header
  • Removed the collapse styles on your navbar div
  • Added 2 new styles in the media query to counteract bootstrap’s style (also changed the max-width to 768 to match bootstrap’s default):

.navbar-header, .navbar-nav, .navbar-nav > li { float: left; }

.navbar-nav { margin: 5px; }

You may also consider customizing the @grid-float-breakpoint variable in bootstrap as mentioned here

Answered By – Joel

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published