CODEWITHSUNDEEP
csstwitter-bootstrap
user1354934
user1354934

Reputation: 8841

bootstrap container contents in the left side of the screen?

I am using bootstrap and I have a container with a login form.

However, I want to align this form to the left side of the page. However, using float left makes it look ugly and also makes the form input smaller, as you can see here:

http://codepen.io/anon/pen/xZGOjR

<div class="container">
    <div class="form-container">
      <form class="form-horizontal" name="form" role="form" >
        <fieldset>
          <div class="form-group">
            <div class="btn-icon-lined btn-icon-round btn-icon-sm btn-default-light">

            </div>
            <input type="email" class="form-control input-lg input-round text-center" placeholder="Email" ng-model="user.email" name="email" ng-required autofocus>
          </div>
          <div class="form-group">
            <div class="btn-icon-lined btn-icon-round btn-icon-sm btn-default-light">

            </div>
            <input type="password" class="form-control input-lg input-round text-center" placeholder="Password">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg btn-round btn-block text-center">Log in</button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>

How can I make it so the form input is to the left side without looking ugly?

Upvotes: 0

Views: 3423

Answers (2)

darronz
darronz

Reputation: 903

To do it the bootstrap way. You could add a column width to the form <div class="form-container text-center col-xs-3">

Here is your original example tidied up a bit http://codepen.io/anon/pen/XXbKvN

Bootstrap uses a 12 column grid system so that everything is nicely laid out on the page. For more info have a look here http://getbootstrap.com/css/#grid-options

Upvotes: 1

Sarower Jahan
Sarower Jahan

Reputation: 1495

You can use width: 350px; to the .form-container class.

It can better, if you can upload your design. screenshot.

Upvotes: 0

Related Questions