Ways to show buttons as inline or block elements when a single button is enclosed within a form

Question

Ways to show buttons as inline or block elements when a single button is enclosed within a form

Need help figuring out how to make two buttons display as block elements on small screens and inline elements on larger screens, especially when one button is wrapped inside a form?

I am struggling with displaying two buttons on my page. One of the buttons is just a local link while the other has been wrapped in a form by my colleague. The issue arises when trying to view the page on smaller screens as the button inside the form does not appear as a block element anymore.

The desired result should be:

Small screen:

| button1 |

| button2 |

Large screen:

| button1 | | button2 |

Current progress with code:

https://www.bootply.com/CETPAyWp2K

(resize screen width to see the effect)

css twitter-bootstrap responsive-design bootstrap-4

Answer 1

Answer №1

To ensure your button occupies the entire space in mobile view, you must update your styles accordingly. Consider implementing the following CSS rules:

form { display: block; }

form button {
   width:100%;
}
@media (min-width: 992px) {
    form {
        display: inline;
    }

    form button {
       width: auto;
    }
}

Answer 2

To ensure your button occupies the entire space in mobile view, you must update your styles accordingly. Consider implementing the following CSS rules:

form { display: block; }

form button {
   width:100%;
}
@media (min-width: 992px) {
    form {
        display: inline;
    }

    form button {
       width: auto;
    }
}

Answer 3

Answer №2

Utilize the w-100 class for the button[type="submit"] and for large screen sizes, implement the following in a media-query:

@media (min-width: 992px) {
    form {
        display: inline;
    }
    button[type="submit"]{
  width: auto!important;
}
}

Check out the fiddle:https://jsfiddle.net/m9n4dgw7/5/

form { display: block; 

}


@media (min-width: 992px) {
    form {
        display: inline;
    }
    button[type="submit"]{
  width: auto!important;
}
}

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col" class="text-right">Action</th>
    </tr>
  </thead>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <tbody>
    <tr>
      <td class="content_name">Samplecol 1</td>
      
      <td class="text-right">
        <a class="btn btn-warning btn-sm btn-edit d-block d-lg-inline mb-1 mb-lg-0" href="#">Edit</a>
        <form action="http://localhost:10777/Delete/3aac236e" method="post">
          <button type="submit" class="btn btn-danger btn-sm w-100 d-block d-lg-inline mb-1 mb-lg-0">Delete</button>
        </form>
      </td>
      
    </tr>
    <tr>
      <td class="content_name">Samplecol 2</td>
      
      <td class="text-right">
        <a class="btn btn-warning btn-sm btn-edit d-block d-lg-inline mb-1 mb-lg-0" href="#">Edit</a>
        <form action="http://localhost:10777/Delete/d81de31b" method="post">
          <button type="submit" class="btn btn-danger btn-sm w-100 d-block d-lg-inline mb-1 mb-lg-0">Delete</button>                        
        </form>
      </td>
      
    </tr>                
    
  </tbody>
</table>

Answer 4

Utilize the w-100 class for the button[type="submit"] and for large screen sizes, implement the following in a media-query:

@media (min-width: 992px) {
    form {
        display: inline;
    }
    button[type="submit"]{
  width: auto!important;
}
}

Check out the fiddle:https://jsfiddle.net/m9n4dgw7/5/

form { display: block; 

}


@media (min-width: 992px) {
    form {
        display: inline;
    }
    button[type="submit"]{
  width: auto!important;
}
}

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col" class="text-right">Action</th>
    </tr>
  </thead>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <tbody>
    <tr>
      <td class="content_name">Samplecol 1</td>
      
      <td class="text-right">
        <a class="btn btn-warning btn-sm btn-edit d-block d-lg-inline mb-1 mb-lg-0" href="#">Edit</a>
        <form action="http://localhost:10777/Delete/3aac236e" method="post">
          <button type="submit" class="btn btn-danger btn-sm w-100 d-block d-lg-inline mb-1 mb-lg-0">Delete</button>
        </form>
      </td>
      
    </tr>
    <tr>
      <td class="content_name">Samplecol 2</td>
      
      <td class="text-right">
        <a class="btn btn-warning btn-sm btn-edit d-block d-lg-inline mb-1 mb-lg-0" href="#">Edit</a>
        <form action="http://localhost:10777/Delete/d81de31b" method="post">
          <button type="submit" class="btn btn-danger btn-sm w-100 d-block d-lg-inline mb-1 mb-lg-0">Delete</button>                        
        </form>
      </td>
      
    </tr>                
    
  </tbody>
</table>

Answer 5

Answer №3

Utilizing Bootstrap and its grid system, you can create responsive buttons.

Here is an example:

<td class="text-right">
    <a class="btn btn-warning btn-sm col-md-3 col-sm-12 mb-1 mb-lg-0" href="#">Edit</a>
    <form action="http://localhost:10777/Delete/3aac236e" method="post">
        <button class="btn btn-danger btn-sm d-block d-lg-inline col-md-3 col-sm-12 mb-1 mb-lg-0" type="submit">Delete</button>
    </form>
</td>

In this instance, the buttons will expand to full width on small devices and 1/4 width on other devices.

Answer 6

Utilizing Bootstrap and its grid system, you can create responsive buttons.

Here is an example:

<td class="text-right">
    <a class="btn btn-warning btn-sm col-md-3 col-sm-12 mb-1 mb-lg-0" href="#">Edit</a>
    <form action="http://localhost:10777/Delete/3aac236e" method="post">
        <button class="btn btn-danger btn-sm d-block d-lg-inline col-md-3 col-sm-12 mb-1 mb-lg-0" type="submit">Delete</button>
    </form>
</td>

In this instance, the buttons will expand to full width on small devices and 1/4 width on other devices.

Ways to show buttons as inline or block elements when a single button is enclosed within a form

Answer №1

Answer №2

Answer №3

Similar questions

Issue with SVG mask not functioning when transform is applied

What could be causing the CSS to not display properly on specific routes?

Does Div have the capability for text-shadow?

What is the best way to modify CSS and HTML with a post request?

Scaling CSS images to fit within a specific area without distorting them

Error encountered when transitioning to TypeScript: Unable to resolve '@/styles/globals.css'

Constructing a horizontal slider using vertically floating divs

Enhancing collapsible list headers in jquery mobile with checkboxes

prevent the page from scrolling to the top when clicking on an empty <a> tag

Tips for aligning a Font-Awesome icon vertically centered with a line of text in Bootstrap 4

Refresh the CSS without having to reload the entire page

Ways to expand flexbox to occupy the entire container

Require help with personalizing a jQuery horizontal menu

Toggle the visibility of a div by clicking on another div in a

Controling attributes during the design process

Themes in Next.js with a splash of color

After a refresh, jQuery's mousenter event is not functioning

Creating uniform-sized flex items with varying image sizes

Customizing the input placeholder for password fields in IE8 using jQuery

What causes block elements to act like inline elements?