How can I set a width of a dropdown in Bootstrap while keeping responsiveness?

Question

I have a very simple dropdown menu consisting of images (two rows, three columns each containing an image).

I want to make the dropdown itself larger, while containing all the images within it when the window is resized. When I set a width or height, the images escape the dropdown window when I make the window smaller.

Is there a good way to adjust the dropdown size, to make it bigger, and add some nice padding to the images within it while keeping responsiveness?

         <div class="btn-group">
            <button type="button" id="menuIcon" dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
            <div class="dropdown-menu dropdown-menu-right">
               <div class="row">
                  <div class="col-md-4">
                     <img src="img1.svg" style="width: 60px;"> <br>
                     <strong>Name</strong>
                  </div>
                  <div class="col-md-4">
                     <img src="img2svg" style="width: 60px;"> <br>
                     <strong>Name</strong>
                  </div>
                  <div class="col-md-4">
                     <img src="img3.svg" style="width: 60px;"> <br>
                     <strong>Name</strong>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-4">
                     <img src="img4.svg" style="width: 60px;"> <br>
                     <strong>Name</strong>
                  </div>
                  <div class="col-md-4">
                     <img src="img5.svg" style="width: 60px;"> <br>
                     <strong>Name</strong>
                  </div>
                  <div class="col-md-4">
                     <img src="img6.svg" style="width: 60px;"> <br>
                     <strong>Name</strong>
                  </div>
               </div>
            </div> <!-- Dropdown-->
         </div> <!-- Btn group -->

https://stackoverflow.com/questions/18590929/setting-the-width-of-a-dropdown-list-in-bootstrap-3-0 — Michael Riley, Sep 06 '17 at 19:18

score 0 · Answer 1 · answered Sep 06 '17 at 19:21

0

<div class="row">
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
     <div class="dropdown" style="width:100%!important" >
       <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button
       </button>
       <div class="dropdown-menu" style="width:100%!important" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
       </div>
     </div>
   </div>
</div>

answered Sep 06 '17 at 19:21

Farhad Bagherlo

6,725
3
25
47

1

i think `!important` is not needed here, since it was already inline css code... in my understanding, all inline css are already prioritized due to css reading process. – iMarkDesigns Sep 06 '17 at 19:28
@iMarkDesigns Yes it is right. But I thought there might be no "!important" in the class. – Farhad Bagherlo Sep 06 '17 at 19:31

How can I set a width of a dropdown in Bootstrap while keeping responsiveness?

1 Answers1