CODEWITHSUNDEEP
htmlcssbootstrap-4
waqar
waqar

Reputation: 75

How to make responsive bootstrap drop down button?

I am using below bootstrap code for a drop-down button. it's working for dropdown but is not responsive on mobile devices. how to make it responsive.

  <div class=" col-sm-4 col-xs-6">
    <div class="guu">
    <a href="{{url('login')}}" class="boxed-btn blank">Login</a>
    <div class="dropdown">
      <button class="dropbtn boxed-btn blank">Register</button>
      <div class="dropdown-content">
     <a href="http://realbitvalley.com/register?ref=admin&pos=L" class="boxed-btn blank">Left Side</a>
      <a href="http://realbitvalley.com/register?ref=admin&pos=R" class="boxed-btn blank">Right Side</a>


    </div>
     </div>             
    </div>
      </div>
     </div>

Thanks in advance.

Upvotes: 0

Views: 5950

Answers (2)

Girisha C
Girisha C

Reputation: 1950

@waqar, please provide a working snippet so that we can see the issue with responsiveness, please have a look at the below working snippet, see if it helps you :)

Note: follow the documentation of the bootstrap dropdown, that will resolve the issue you are facing,

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <li><a href="#">Choice..</a></li>
  </ul>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Upvotes: 0

Louis Chapelle
Louis Chapelle

Reputation: 11

You should make a list !

  <ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>

as written here : https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

Upvotes: 1

Related Questions