Using Bootstrap Theme and Aligning Form in Center of Page

Question

I would like to center my form in the center of my page (like on the Google homepage) but am having problems doing so. I am using the Bootswatch theme Darkly (hosted from a CDN).

In app.component.html I have:

<div>

      <div class="containercenter">
        <form>
          <fieldset>
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </fieldset>
        </form>
      </div>

</div>

then in app.component.css:

#containercenter {
  width: 100%;
  height: 100%;
  align-items: center;

}

I have tried a variety of things in the css file including padding, height, width, align-content,... but none of these seem to work. I have also tried fiddling with the HTML/Bootstrap id or class, different divs. But nothing has worked.

How can I create a Google like layout for my webpage??

For more information see: https://github.com/gf1721/directoryapp

Answer 1

Change your #containercenter to .containercenter and change the css to the following.

        .containercenter {
        width: 50%;
        margin: 0 auto;
        }

Currently, your code is doing nothing as you've defined a class of containercenter but you've specified in your css to look for an id with containercenter. In CSS we use .classname for classes and #idname for ids.

When you're working with id's your HTML would be

<div id="containercenter">

Hopefully, this makes sense, I'm happy to elaborate further if you need.