Recently, I decided to design a login form for my website. To quickly style the form, I opted to use Bootstrap through CDN. While working on the form, I encountered an issue with the button size as the device width changed. Initially, I applied the classes .btn .btn-danger .btn-lg to the button element. However, as the screen size decreased, I needed a smaller button without the .btn-lg class.
To address this, I created two buttons with identical text and properties. One button had the .btn-lg class while the other had the .btn-sm class. Through some CSS modifications, I toggled the visibility of these buttons based on the device's width - hiding the .btn-lg when the width was less than 767px and vice versa for the .btn-sm.
While this solution seems to work well on the front-end, I am unsure if it is considered a good practice in web development. Could this approach potentially cause issues in future developments?
Below are snippets of the relevant HTML and CSS 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>
* {
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;
}
}