Bootstrap 5 - Change FORM width on mobile

Question

I want a Form to display at 100% width on the desktop and 75% width on mobile.

Is there a way to do that using w-100 and w-75 or does that have to be accomplished with a media query? Also, the media query I'm using has no effect so I'm doing something wrong but I can't figure out what.

  <style>
/* Portrait phones and smaller */

@media (min-width: 768px) {
  .formwidth: {
    {
      width: 75%;
    }
  }
  </style>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-center">
  <div class="col-md-6 mx-auto d-block d-flex justify-content-center"> <img alt="Student Dashboard Login" src="https://efit.health/images/running-guy.svg" width="90%" class="mb-4" role="presentation" /></div>
  <div class="col-md-6 col-sm-12 d-flex justify-content-center">
    <form METHOD="post" ACTION="success.php" aria-label="Sign in to Student Dashboard" id="signin" class="formwidth">
      <div role="group" aria-labelledby="contact-label">
        <div class="form-group text-left mb-3 form-floating">
          <input type="text" id="username" class="form-control" placeholder="Enter Username" name="username" aria-required="true" aria-label="Enter Username" required autofocus>
          <label for="username" class="form-label">Username</label>
        </div>
      </div>
      <div class="d-grid gap-2 mx-auto">
        <button type="submit" class="btn btn-outline-primary btn-lg btn-responsive" value="Sign In">Sign In</button>
      </div>
    </form>
  </div>
</div>

Answer 1

This can be done with the responsive .col-* classes and .w-100 on the form.

Remember BS uses "mobile first" ideology. You want to start with .col-8 75% on smallest screens and then .col-md-6 for half the row on medium and larger. Also you should have .justify-content-center on the parent .row:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-center">
  <div class="col-md-6 mx-auto d-block d-flex"> <img alt="Student Dashboard Login" src="https://efit.health/images/running-guy.svg" width="90%" class="mb-4" role="presentation" /></div>
  <div class="col-8 col-md-6 d-flex ">
    <form METHOD="post" ACTION="success.php" aria-label="Sign in to Student Dashboard" id="signin" class="w-100">
      <div role="group" aria-labelledby="contact-label">
        <div class="form-group text-left mb-3 form-floating">
          <input type="text" id="username" class="form-control" placeholder="Enter Username" name="username" aria-required="true" aria-label="Enter Username" required autofocus>
          <label for="username" class="form-label">Username</label>
        </div>
      </div>
      <div class="d-grid gap-2 mx-auto">
        <button type="submit" class="btn btn-outline-primary btn-lg btn-responsive" value="Sign In">Sign In</button>
      </div>
    </form>
  </div>
</div>