Creating a Bootstrap dropdown button that responds to different screen sizes

I have implemented the following Bootstrap code for a drop-down button. The dropdown functionality works fine, but it is not responsive on mobile devices. Can someone help me with making 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>

Any suggestions on how to make this responsive would be greatly appreciated.

htmlcssbootstrap-4

Answer №2

@waqar, could you please share a functional code snippet to help us troubleshoot the responsiveness issue? You can refer to the example below for guidance:

Note: make sure to consult the bootstrap dropdown documentation to address the problem at hand.

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the Drupal Colorbox module with Internet Explorer

This problem has been driving me crazy! I'm struggling to make Colorbox show the borders correctly in IE7 (and even in IE6, but I'll settle for just IE7 at this point!). You can check out the issue here. When you click on a picture in the galler ...

cssinternet-explorerdrupalgallerycolorbox

Choose to conceal beneath the table within Bootstrap 4

As a budding web developer, I am currently using Bootstrap 4 in my project. If you take a look at my preview by clicking here and then selecting "Liczba sztuk," you'll notice that I am facing an issue. The items within the select dropdown are gettin ...

javascriptcsstwitter-bootstrapbootstrap-4

Does text disappear when hovered over in CSS?

Having some trouble getting a text to display on hover over the parent container while adjusting the opacity. Despite trying multiple methods, it just won't show up no matter what I do! Here is my current code: .project{ position: relative; ...

htmlcsshover

Centered perfectly in a bootstrap card

I'm struggling to create a bootstrap card with a logo perfectly centered, but the logo seems fixed at the top. How can I fix this issue? <div class="col-xl-3 col-md-6"> <div class="card mini-stat"> <div class="card-body tex ...

htmlcssbootstrap-4

Exploring the analysis of JavaScript and CSS coverage throughout various pages or websites

The Chrome Dev Tools JavaScript and CSS Coverage Drawer is quite impressive, but there is one thing that could make it even better. It would be great if it could remain active without restarting its analysis every time you visit a new page. I wish I could ...

javascriptcssgoogle-chrome-devtoolscode-coverage

The Bootstrap table spills over the edges of the container

I'm currently working on a project where I need to create a table with a grey background, but I am facing an issue where the lines from my table are extending past the div container. I even tried placing it inside a form, but that did not resolve the ...

phphtmlcsstwitter-bootstrap

jQuery - restrict input field based on the value of a different selected field

Could anyone recommend a jQuery plugin that can achieve the following functionality? For example: <label><input type="checkbox" depends_on="foo=5" name="boo" ... /> Check </label> <select name="foo" ... > <option value="5" se ...

javascriptjqueryhtmlformsinput

The content of btn-id element in Angular is showing as undefined

I have a JavaScript file located at sample/scripts/sample.js and there are 8 HTML files in the directory sample/src/templates/. My goal is to select a button on one of the HTML files. When I tried using angular.elemnt(btn-id).html(), I received an 'un ...

javascriptcssangularjshtmlangularjs-directive

displaying a confirmation alert upon unchecking a checkbox using javascript

I am trying to implement a feature where a message saying "are you sure?" pops up when the user tries to uncheck a checkbox. If they choose "yes", then the checkbox should be unchecked, and if they choose "no" it should remain checked. I'm new to Java ...

javascripthtml

Expanding iFrame width in Drupal 7

I'm grappling with how to create a full-width page in my Drupal 7 website. This specific page contains an embedded form. Initially, there were two blocks on the page that I removed in hopes of getting the iframe to expand to fill the space. The cur ...

htmlcssiframedrupaldrupal-7

Exploring the possibilities of combining CSS classes with Tailwind CSS!

Exploring the integration of Tailwind CSS classes with Next.js for a project I am working on. Is there a method to combine Tailwind CSS classes with Next.js classes? For instance: <img src={user.picture} className="rounded"{styles.pfp}>< ...

cssnext.jstailwind-css

Problems arising from Jquery append functionality

When using the append method, my inner div is only attaching one WHEAT-COLORED-BOX, whereas when using appendTo, my inner div attaches all the required number of WHEAT-COLORED-BOXES. Therefore, in this case, appendTo gives the correct result while append f ...

javascripthtmljquerycssnode.js

What is the best way to resize SVG graphics effectively?

I am in need of creating a seating chart. I have generated an SVG with the seats. <div class="seats-map"> <svg xmlns="https://www.w3.org/2000/svg" id="seats-map-svg" viewBox="0 0 1000 300"> <g data-row ...

htmlcsssvg

Bring to life the div that has been clicked

There are three divs labeled as "left", "active", and "right" in my setup: Whenever the left div is clicked, it animates to become active and the previously active one moves into its place. I want this same functionality to apply to the right div as well. ...

jquerycssjquery-animate

Customize the color when clicking on a mat-slide-toggle

Whenever I click on the element, a shadow appears in the color that corresponds to the element, which is currently yellow https://i.sstatic.net/21BR4.png I would like to change that shadow to be green instead, but I am unsure of how to do so. Here is my ...

htmlcssangularcolorsangular-material

Unveiling the hidden: Leveraging Python to extract elements not visible in HTML, yet present in Chrome's "Inspect Element" tool

Hello Python Experts! I'm diving into the world of Python and working on a program to retrieve data from a webpage. If the page returned all the information in its HTML source, there wouldn't be an issue as it's easily viewed in Chrome. Howe ...

javascriptpythonhtmlgeoipmaxmind

django div auto refresh

Whenever I submit a form, the content of console.html is supposed to change. I tried to use the code below to refresh the page, but it doesn't seem to refresh console.html: Javascript function autorefresh() { // auto refresh page after 1 sec ...

javascripthtmldjangopage-refresh

Struggling to understand why my React Component is failing to render properly

Could there be an issue with how I imported react or am I simply overlooking something small? Any feedback would be greatly appreciated. As a beginner in programming, I may be missing a simple solution that I'm not experienced enough to identify. Than ...

javascripthtmlreactjs

Using rtl direction in Firefox does not function properly

Is there a way to create a select menu that opens from right to left? When I use Google Chrome, it appears correctly. https://i.sstatic.net/tgVvM.png However, when I use Firefox, it displays an error. https://i.sstatic.net/xys5v.png Below is the code ...

htmlcss

Using Bootstrap Modal with Jquery: Detected 2 elements on the DOM that share the same id, but thankfully all IDs are distinct

I have integrated Bootstrap 4 into my website, and I am facing an issue with having two different modal types on a single page. I am using Ajax to populate the content of these modals, and while the forms in each modal are distinct, they share some similar ...

javascriptjquerydombootstrap-4bootstrap-modal