How to center align form i


Topic: How to center align form i

anuragd7 asked 6 years ago

Expected behavior I am using a form on my landing page. I want to make the form left aligned for large and medium screens and center aligned when the size of the screen is small. I am not being able to achieve that effect. The desired effect works perfectly for the h1 title in my code -

<h1 class="h1-responsive quicksand font-weight-bold wow fadeInLeft" data-wow-delay="0.3s">Get Your Cooky In 2 minutes! </h1>

Actual behavior

Resources (screenshots, code snippets etc.) My Code

<div class="mask rgba-black-strong d-flex justify-content-center align-items-center">
      <!-- Content -->
      <div class="container">
        <!--Grid row-->
        <div class="row">
          <!--Grid column-->
          <div class="col-md-6 mb-5 white-text text-center text-lg-left">
            <h1 class="h1-responsive quicksand font-weight-bold wow fadeInLeft" data-wow-delay="0.3s">Get Your Cookie In 2 minutes! </h1>
            <!-- <hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s"> -->
            <h6 class="wow fadeInLeft" data-wow-delay="0.3s">Try it. Now!</h6>
            <br>
            <!-- <div class=""> -->
            <form id="search-form" class="md-form form-inline mb-3 text-center">

              <input class="form-control form-control-sm mr-3 w-75" type="search" id="search6" aria-label="Search by lesson or topic" mdbInput>

              <label for="search6">Search by lesson or topic</label>
              <button type="button" size="sm" mdbBtn color="primary" mdbWavesEffect>Get Tests</button>

            </form>
          <!-- </div> -->
          </div>
       </div>
    </div>
</div>

Arkadiusz Idzikowski staff answered 6 years ago

If you need to change the position of these elements depending on the viewport width, you should use media queries. Please take a look at our documentation:

https://mdbootstrap.com/docs/angular/layout/media-queries/


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.3
  • Device: mac
  • Browser: chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No