What is the best way to make a button fill the entire width on smaller screens?

Question

What is the best way to make a button fill the entire width on smaller screens?

I am struggling with the following code snippet:

<div class="ml-auto text-right">
    <button class="btn btn-next mobile" />
</div>

Along with this block of css:

@media screen and (max-width: 576px) {
  .mobile {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    display: block;
    text-align: center;
  }
}

My goal is to have the button aligned right on desktop, while expanding to full width on mobile.

Unfortunately, my current implementation is not producing the desired result.

Can someone please provide guidance on the correct approach to achieve this?

html css bootstrap-4

Answer 1

Answer №1

In this specific instance, a media query designed for small devices max-width is illustrated. The scenario involves two <button> elements, each enclosed within a <div>. One of these <div> containers will be visible while the other will have a style of display: none.

The essential Bootstrap classes include:

For Desktop:

<div class="d-flex justify-content-end"></div>

For Mobile:
- .d-grid
```
<div class="d-grid"></div>
```

To ensure specificity, the custom classes .desktop and .mobile need to be duplicated, along with utilizing !important to override the default BS classes. Usage of Bootstrap Icons is discretionary.

Switch to Full page view mode and adjust the window size.

.mobile.mobile {
  display: none !important;
}

@media (max-width: 575.98px) {
  .desktop.desktop {
    display: none !important;
  }
  .mobile.mobile {
    display: grid !important;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671209140914">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492b26263d3a3d3b283964202a26273a0978677878677a">[email protected]</a>/font/bootstrap-icons.min.css" rel="stylesheet">
  <style>
   /*
     Additional CSS can be placed here or linked externally as the final <link>
  */
  </style>
</head>

<body>
  <main class="container">
    <section class="row">
      <div class="col-12">
        <div class="p-3 d-flex justify-content-end desktop">
          <button class="btn btn-lg btn-primary btn-next">
            Next <i class="bi bi-caret-right-fill"></i>
          </button>
        </div>
        <div class="p-3 d-grid mobile">
          <button class="btn btn-lg btn-primary btn-next">
            Next <i class="bi bi-caret-right-fill"></i>
          </button>
        </div>
      </div>
    </section>
  </main>
</body>

</html>

Answer 2

In this specific instance, a media query designed for small devices max-width is illustrated. The scenario involves two <button> elements, each enclosed within a <div>. One of these <div> containers will be visible while the other will have a style of display: none.

The essential Bootstrap classes include:

For Desktop:

<div class="d-flex justify-content-end"></div>

For Mobile:
- .d-grid
```
<div class="d-grid"></div>
```

To ensure specificity, the custom classes .desktop and .mobile need to be duplicated, along with utilizing !important to override the default BS classes. Usage of Bootstrap Icons is discretionary.

Switch to Full page view mode and adjust the window size.

.mobile.mobile {
  display: none !important;
}

@media (max-width: 575.98px) {
  .desktop.desktop {
    display: none !important;
  }
  .mobile.mobile {
    display: grid !important;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671209140914">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492b26263d3a3d3b283964202a26273a0978677878677a">[email protected]</a>/font/bootstrap-icons.min.css" rel="stylesheet">
  <style>
   /*
     Additional CSS can be placed here or linked externally as the final <link>
  */
  </style>
</head>

<body>
  <main class="container">
    <section class="row">
      <div class="col-12">
        <div class="p-3 d-flex justify-content-end desktop">
          <button class="btn btn-lg btn-primary btn-next">
            Next <i class="bi bi-caret-right-fill"></i>
          </button>
        </div>
        <div class="p-3 d-grid mobile">
          <button class="btn btn-lg btn-primary btn-next">
            Next <i class="bi bi-caret-right-fill"></i>
          </button>
        </div>
      </div>
    </section>
  </main>
</body>

</html>

Answer 3

Answer №2

Give this revised CSS a try, utilize the parent class to prevent any potential conflicts

@media screen and (max-width: 576px) {
      .mobile {
        width: 100%;           
        margin: 0 auto;        
        padding: 0.5rem 1rem;  
        display: block;        
        text-align: center;   
      }
    
      .ml-auto {
        margin-left: auto;    
      }
    
      .text-right {
        text-align: initial;
      }
    }

Answer 4

Give this revised CSS a try, utilize the parent class to prevent any potential conflicts

@media screen and (max-width: 576px) {
      .mobile {
        width: 100%;           
        margin: 0 auto;        
        padding: 0.5rem 1rem;  
        display: block;        
        text-align: center;   
      }
    
      .ml-auto {
        margin-left: auto;    
      }
    
      .text-right {
        text-align: initial;
      }
    }

Answer 5

Answer №3

By adopting the widely-used mobile-first strategy, you can streamline the process:

Check out this code snippet


/* defaults to occupying entire width */
.mobile {
  width: 100%;
}

/* adjusts based on specific dimensions - notice the change from "max-with" to "min-width" */
@media screen and (min-width: 576px) {
  .mobile {
    width: auto;
  }
}

Answer 6

By adopting the widely-used mobile-first strategy, you can streamline the process:

Check out this code snippet


/* defaults to occupying entire width */
.mobile {
  width: 100%;
}

/* adjusts based on specific dimensions - notice the change from "max-with" to "min-width" */
@media screen and (min-width: 576px) {
  .mobile {
    width: auto;
  }
}

Answer 7

Answer №4

The code provided does not meet your requirements. You will need to apply CSS to the button container div.

In your HTML, include a class for the button container div.

<div class="ml-auto text-right button-container">
    <button class="btn btn-next mobile">Next</button>
</div>

To align the container to the right on desktop, add the following CSS. The mobile media query is responsible for displaying it full-width on mobile screens.

.button-container {
    display: flex;
    justify-content: flex-end;
}

@media screen and (max-width: 576px) {
  .mobile {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  .button-container {
    justify-content: center;
  }
}

I have tested the code above here: https://jsfiddle.net/rekhaDarshna/yv4fg9ew/

Please let me know if there is anything else you require.

Answer 8

The code provided does not meet your requirements. You will need to apply CSS to the button container div.

In your HTML, include a class for the button container div.

<div class="ml-auto text-right button-container">
    <button class="btn btn-next mobile">Next</button>
</div>

To align the container to the right on desktop, add the following CSS. The mobile media query is responsible for displaying it full-width on mobile screens.

.button-container {
    display: flex;
    justify-content: flex-end;
}

@media screen and (max-width: 576px) {
  .mobile {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  .button-container {
    justify-content: center;
  }
}

I have tested the code above here: https://jsfiddle.net/rekhaDarshna/yv4fg9ew/

Please let me know if there is anything else you require.

Answer 9

Answer №5

.mybtn {
            display: block;
            background-color: green;
            color: beige;
            width: 100%;
            height: 50px;
            font-size: 30px;
            border-radius: 40px;
            border: none;
        }

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Full Width Button Example</title>
    
    </head>

<body>
    <button class="mybtn">
        Full Width Button
    </button>

</body>

</html>

Answer 10

.mybtn {
            display: block;
            background-color: green;
            color: beige;
            width: 100%;
            height: 50px;
            font-size: 30px;
            border-radius: 40px;
            border: none;
        }

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Full Width Button Example</title>
    
    </head>

<body>
    <button class="mybtn">
        Full Width Button
    </button>

</body>

</html>

What is the best way to make a button fill the entire width on smaller screens?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How about: "Is there a way to show items in a list without using

What is the reason for jQuery displaying undefined when attempting to retrieve a custom data attribute using .prop()?

Problems with form functionality in React component using Material UI

Trimming Text with JQuery

Angular: Enhancing user experience with draggable and droppable items in a flexible list

Bulma: Tips for creating equally sized buttons?

Designed radio buttons failing to activate when focused using a keyboard

Troubleshooting inconsistent htaccess changes across different pages?

Enclose Words Inside Unconventional Outline

What is the best way to incorporate JQuery into html content retrieved through an ajax request?

Get rid of the <h1> tag surrounding the Wordpress logo

Using a combination of a bootstrap class and a custom CSS class to enhance your website design

Issue arising with hover animation on a stable colored background

Tips for preventing a column from extending beyond the edge of the browser window during resizing

Svelte components loaded with no design aspects applied

Struggling to implement a sidebar in HTML using jQuery and running into issues?

Looking for something? The search box in Material Design Lite is just like the

Avoid printing employees whose ID begins with special characters

There are two borders in place, with the second border present only on the right and bottom

How can we loop through an array and display each item in a container with a fixed height until all the space is filled?