Disable the button on smaller devices

I'm trying to make my button take up the full width on smaller screens like mobile devices. Here's what I have so far...

Large Device https://i.sstatic.net/TJex1.png

Medium Device https://i.sstatic.net/Hvkan.png

Small Device

https://i.sstatic.net/JgxuZ.png

For medium to small devices, I want the button to expand vertically to occupy the entire block. I haven't implemented any custom CSS yet, only using Bootstrap defaults. Check out my code snippet below:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac8c5c5ded9ded8cbdaea9f849b8499">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<header class="p-3 bg-dark text-white">
  <div class="container">
    <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
      <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
        <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
      </a>

      <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
        <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
        <li><a href="#" class="nav-link px-2 text-white">Features</a></li>
        <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
        <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
        <li><a href="#" class="nav-link px-2 text-white">About</a></li>
      </ul>

      <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" style="display:flex; align-items:inherit;">
        <input type="text" class="form-control form-control-dark" placeholder="Username" aria-label="Username">
        <input type="password" class="form-control form-control-dark" placeholder="Password" aria-label="Password">
        <button type="submit" class="form-control btn btn-outline-light" style="margin-left: 1rem!important;">Login</button>
      </form>



      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <button class="btn btn-primary me-md-2" type="button">Button</button>
        <button class="btn btn-primary" type="button">Button</button>
      </div>

      @*
      <div class="text-end d-sm-block gap-2">
        <button type="button" class="btn btn-warning" style="width:100%; display:block;">
                            Sign-up
                        </button>
      </div>*@
    </div>
  </div>
</header>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Give this a try.... Simply include d-grid gap-2 within the Div element that contains your button. You might need to adjust the number in gap-2 to achieve the exact look you want. By doing this, you may also be able to eliminate the need for the style= attribute in your button.


<div class="text-end d-grid gap-2">
   <button type="button" class="btn btn-warning" style="width:100%; display:     
   block;">Sign-up</button>
</div>

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

What is the best way to position a small image within a menu?

Is there a way to adjust the position of the arrow image within the <li> element without affecting the layout of the unordered list? Below is the code snippet for reference: body { margin: 0; padding: 0; } nav { width: 100%; background: # ...

htmlcssimagenav

"PHP MySQL news error" - An unexpected error occurred

Just incorporated a news system using MySQL/PHP, it functions flawlessly; however, encounters errors when inserting HTML. For instance, inserting a YouTube video results in the addition of / or \ Can someone advise on what changes need to be made in ...

phpmysqlhtml

Is it possible to activate numerous hover effects on links by hovering over a div?

How can I trigger multiple hover effects simultaneously when hovering over my main div? I'm struggling to figure out how to make the line animate on all three links at the same time. Is it possible to achieve this using only CSS or do I need to use Ja ...

htmlcsshover

Custom Bootstrap 3 Panel Organization

I'm intrigued by the layout shown in the image attached. My attempts to recreate it using a combination of columns and rows have been unsuccessful. Could it be that I'm going about this the wrong way? ...

csstwitter-bootstraplayoutpanel

In PHP, ensure to properly close HTML tags within a for each loop

I am currently working with an array called $links. My goal is to generate five links and one HTML container, but I am unsure how to properly close the tags. $i = 0; foreach($links as $link) { if($i==0||!is_float($i / 5)) { echo " ...

phphtmlcss

Changing HTML dynamically does not trigger the ng-click event within ng-bind-html

I have developed a custom directive that can display messages along with rendering HTML content that may contain Angular attributes like buttons, anchor tags with ng-click attribute, and more. index.html: <ir-error-panel status="status"></ir-err ...

javascriptjqueryhtmlangularjs

Ensure the width of ancestor flexbox divs is limited to the width of its child by setting a specific width

I have a specific element that incorporates flex display and I've defined its width with the flex-basis property like this: .flex-row input { flex: 0 1 450px; } There is a flex-row division nested inside a flex-container division. My goal is for th ...

htmlcssflexbox

PHP and issues with search functionality

I am currently working on developing a search function to retrieve and display data from a MySQL database based on user selection. However, I encountered an error that I am not sure how to resolve. Can anyone provide assistance? I am fairly new to PHP. The ...

phphtmlmysqldreamweaver

Issue with JS jQuery: The click event on an li element within an expanded ul does not function properly

I have built a basic webpage to explore jQuery. However, there is an issue that arises when I click on the "Button: another one." It seems to interfere with the event of clicking on the li element, causing it to glitch and not respond. Here is the code: JS ...

javascriptjqueryhtmlhtml-lists

Tips for concealing the browser's scroll bar on a designated webpage

Is there a way to hide the browser scrollbar on just one page of a website without affecting other pages? I have only been able to hide the scrollbar using body::-webkit-scrollbar { display: none; } However, this code hides the scrollbar for the enti ...

htmlcssvue.js

jQuery id selector issue: not selecting elements properly

It seems like I am overlooking a very fundamental aspect here. Essentially, there are 2 div elements in the HTML markup. When one is clicked (#x), the other div element (#block1) gains a new class (.change), resulting in a change in its color. The issue ...

jqueryhtmlcssclick

Creating a carousel with a curved dial or wheel: A step-by-step guide

My goal is to create a carousel with curved container and downward movement for items not in focus. The description should change based on the focused item, and I prefer the carousel not to autoplay. via GIPHY I've been searching online for a soluti ...

jquerycsscarouselcurveowl-carousel-2

Tips for resolving issues with the carousel container in bootstrap?

Is there a way to adjust the carousel box container in Bootstrap so that it remains consistent even with images of varying sizes? Currently, the box size changes based on the image dimensions when sliding through the carousel. Sample Code: <h1>Caro ...

javascriptjqueryhtmltwitter-bootstrapcarousel

Tips on navigating the scroller vertically as the user interacts with a selected div by scrolling up and down

On my webpage, I have various div elements displayed. Each div has the options to move it up or down using the buttons labeled "UP" and "Down". When a user selects a div, they can then use these buttons to adjust its position. I am looking for a way to au ...

javascriptjquerycss

Tips on getting rid of the excess margin added by Android WebView printing

We have been attempting to print content from a webview via Google Cloud Print, but no matter what steps we take, the resulting printout always includes an unwanted margin. Is there a solution to eliminate this margin? We have tried: <body style="marg ...

androidhtmlwebviewandroid-webviewgoogle-cloud-print

Using PHP, jQuery, and HTML to submit a form and insert data into MySQL, all while

I am facing an issue with my PHP intranet site, which includes an HTML form with 2 input fields. My goal is to take the user's input from the form and insert it into a MySQL database without redirecting the user to another page. I have a separate PHP ...

javascriptphpjqueryhtmlmysql

How can I protect a text or script file from being accessed or downloaded by entering its URL directly into the browser address bar?

While working on my JSP file, I have incorporated some Java-script code but to safeguard it from being visible to clients, I decided to store it in a separate codescript.js file and load it using ajax like so: $.ajax({ cache: true, dataType: "script ...

javascriptajaxhtml

While using Nav, it is necessary to adjust the height of the drop-down menu to accommodate the content when the sub-menu

My dropdown menu has multiple submenus, and I'm facing an issue where the submenu content overlaps the container when opened. I want the container to scale to the height of the submenu content when opening, and then reduce back when closing the submen ...

htmlcssdropdownbootstrap-5nav

Shifting Icon to the Right within the Drawer Navigator Toolbar

While modifying the example code for Material UI's drawer navigator, I decided to enhance it by adding a notification icon and a checkout icon with the Admin Panel typography in the toolbar. However, I encountered an issue where the checkout icon app ...

javascripthtmlcssreactjsmaterial-ui

Tips for Concealing PHP Undefined Error Messages Using Echo

I'm new to PHP and I'm attempting to display user information in a div after submission using the echo function. Here is my current code snippet: <label class="input-fields" name="cust-name"> Name <input type="text" id="cust[name]" ...

phphtml