Question 273444 in Html Question posted in
Some basic documentation can be found here.

Html – Hiding one of the button, is it a good method?

So I wanted to create a login form. I am using Bootstrap (using CDN) to style my form quickly. I initially gave my button the classes .btn .btn-danger .btn-lg. But as the device width got smaller, I needed a smaller button, but I don’t know a way to turn off .btn-lg and turn on .btn-sm if the device width is smaller. So I created two buttons with the same text and properties, if the device width is smaller than 767px I set display: none; for the .btn-lg and the same for the .btn-sm if width is greater than 768px. This is working fine as far as the front-end is concerned. I want to know if this is a good practice and will it pose me problems in the future of development.
Here’s the snippets of my code:
HTML:

<form class="form-group">
    <input type="text" class="form-control" name="user" placeholder="Username" required>
    <input type="password" class="form-control" name="pwd" placeholder="Password" required>
    <p>Forgot your password?</p>
    <button type="submit" class="btn btn-danger bg-gradient btn-lg">LOG IN</button>
    <button type="submit" class="btn btn-danger bg-gradient btn-sm">LOG IN</button>
</form>

CSS:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.btn-danger {
    background-color: orangered;
    color: white;
}

.btn-lg {
    border-radius: 30px;
    display: none;
}

.btn-sm {
    border-radius: 30px;
}

@media screen and (min-width: 768px) {
    .btn-lg {
        display: block;
        margin: auto;
    }

    .btn-sm {
        display: none;
    }
}
Tags:

2

Answers


  1. 0

    I believe it depends on the case, but I personally prefer to only have one element for it. Below is one of a possible solution, which might be not for everyone:

    <button type="submit" class="btn m-0 p-0">
    <span class="btn btn-danger btn-sm d-md-none">BTN</span>
    <span class="btn btn-danger btn-lg d-none d-md-inline">BTN</span>
</button>
    Login or Signup to reply.
  2. 0

    I always face same issue and dilemma especially while using Bootstrap. I always want to write less CSS codes as much as I can, so I always prefer first approach below;

    Approach 1 – Having 2 buttons;

    Having two different buttons and show them based on the device width is not the most efficient or best practice for responsive design. It can cause to future maintenance problems and it makes your code complicated.

    But, this is the easiest way to solve the problem. Besides that for further design requests, you’ll have two different buttons to make those changes. (Example: font-size). You can just add fs-4 and fs-6 classes to your buttons.

    We can achieve the requested responsiveness by using Bootstrap’s built-in classes without writing any additional CSS code.

    <form>
    <!-- Other Form Elements -->
    <button type="submit" class="btn btn-danger btn-lg d-none d-md-inline">Login</button>
    <button type="submit" class="btn btn-danger btn-sm d-inline d-md-none">Login</button>
</form>

    Approach 2 – A Button with CSS;

    This solution will also work for most people but it requires a bit CSS code to change buttons width. You can use CSS media queries to set the width of your login button.

    <form>
    <!-- Other Form Elements -->
    <button type="submit" class="btn btn-danger btn-lg login-button">Login</button>
</form>
<style>
@media (min-width: 992px) {
    .login-button {
       width: 120px; /* Adjust the width as you need */
    }
}

@media (max-width: 576px) {
    .login-button {
        width: 60px; 
    }
}
</style>

    So, both approaches are correct, and the choice between them entails a trade-off that should be decided by you based on your situation.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search