how to make a button group a drop down when using mobile using bootstrap

Question

@media (min-width: 320px) {

}

@media (min-width: 576px) { 

}

@media (min-width: 768px) { 

}

@media (min-width: 992px) { 

}

@media (min-width: 1200px) { 

}

<div class="container">

<div class="row">

<div class="col-lg-24 col-centered">

<div class="btn-group flex-wrap">
<a href="neckandears.html" class="btn btn-info" role="button">Necklace and Earring sets</a>
<a href="necklaces.html" class="btn btn-info" role="button">Necklaces</a>
<a href="bracelets.html" class="btn btn-info" role="button">Bracelets</a>
<a href="earrings.html" class="btn btn-info" role="button">Earrings</a>
<a href="gemstones.html" class="btn btn-info" role="button">Gemstones</a>
</div> 	
					
</div>
				
</div>

All of the site I am creating is responsive except for the button bar that I have. The HTML is included. When the screen size goes to mobile I am wanting the button bar to become a dropdown to hopefully alleviate this issue. As of now my CSS is only changing the colors of the borders and inside of the buttons although I do have media queries. I have 5 buttons in a button bar below my nagation bar that when the screen size is smaller than used for desktop I want it to be a dropdown instead of the button group. I am currently using a flex wrap but the buttons just stack on top of each other in mobile view. I have not been able to find a way to make the button group itself responsive and shrink to size like the rest of my site. This is my first time ever using HTML or CSS. Thank you for your help!

Answer 1

The easiest approach is to actually have a dropdown with those links as well, along with button group, and display one of each other based on the screen width.

<div class="container">
    <div class="btn-group d-none d-md-flex justify-content-center">
        <a href="neckandears.html" class="btn btn-info" role="button">
            Necklace and Earring sets
        </a>
        <a href="necklaces.html" class="btn btn-info" role="button">
            Necklaces
        </a>
        <a href="bracelets.html" class="btn btn-info" role="button">
            Bracelets
        </a>
        <a href="earrings.html" class="btn btn-info" role="button">
            Earrings
        </a>
        <a href="gemstones.html" class="btn btn-info" role="button">
            Gemstones
        </a>
    </div>
    <div class="dropdown d-md-none">
        <button class="btn btn-secondary dropdown-toggle" type="button"
            data-toggle="dropdown">
            Category  
        </button>
        <div class="dropdown-menu">
            <a href="neckandears.html" class="dropdown-item">
                Necklace and Earring sets
            </a>
            <a href="necklaces.html" class="dropdown-item">
                Necklaces
            </a>
            <a href="bracelets.html" class="dropdown-item">
                Bracelets
            </a>
            <a href="earrings.html" class="dropdown-item">
                Earrings
            </a>
            <a href="gemstones.html" class="dropdown-item">
                Gemstones
            </a>     
        </div>
    </div>
</div>

Couple key points here:

1. I created 2 sets of HTML elements here: one btn-group with links, and one dropdown with same links.
2. I used Bootstrap Utilities class display to show/hide elements:
   • d-none on btn-group: hide it from beginning
   • d-md-flex on btn-group: display it as flexbox on min-width: 768px;, which is for medium devices and up. So the btn-group will Not appear on phones.
   • d-md-none on dropdown: display it until width of 767px. So the dropdown will appear on phones.
   • justify-content-center on btn-group: set justify-content: center; so that the button group will be centered on the row.

Result:

@media (min-width: 576px) and @media (min-width: 768px)

@media (min-width: 992px)

Demo: https://jsfiddle.net/davidliang2008/bxvdm53s/