How to fix the alignment issue of the header with the rest of the bootstrap form controls?

Question

I am using bootstrap 3. Here is my code

.divisionify {
  margin-bottom: 5px;
  position: relative;
  border-top: 2px solid gray;
}

.form-title {
  position: relative;
  color: #7cc0e1;
  font-size: 20px;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
    <div class="form-title">Apply for Plan</div>
    <div class="divisionify"></div>

    <form class="form-horizontal">
      <div class="form-group">
        <label for="institution-type" class="control-label">Type of institution</label>
        <div class="">
          <input type="email" class="form-control" id="institution-type" placeholder="Type of institution">
        </div>
      </div>
      <div class="form-group">
        <label for="name" class="control-label">Name</label>
        <div class="">
          <input type="text" class="form-control" id="name" placeholder="Name">
        </div>
      </div>
      <div class="form-group">
        <div class="">
          <button type="submit" class="btn btn-default">Apply</button>
        </div>
      </div>
    </form>
  </div>
</div>

And it produces this layout

You can see the title 'Apply for Plan' does not align with the form controls on the left hand side.

it is because of these settings by Bootstrap

margin-left: -15px;
margin-right: -15px;

I can fix this issue by adding them too to my css class .form-title and .divisionify

However is there a better way to fix the alignment?

This is my desired layout

score 2 · Answer 1 · answered Feb 21 '17 at 02:57

2

Why not just override the Bootstrap styles with your own?

Add this to your code:

.form-group {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

answered Feb 21 '17 at 02:57

Michael Benjamin

346,931
104
581
701

Thanks for the answer. I think it gonna work. However isn't it generally a bad idea to use `~important`? – Anthony Kong Feb 21 '17 at 03:23
People like to say things like: *never use `!important`*, *never use inline styles*, *never use tables for layout*, etc. These sorts of statements are generally simplistic and exaggerated. – Michael Benjamin Feb 21 '17 at 03:31
I agree that `!important` should not be used as a substitute for writing good quality code. You should always use specificity and the cascade to apply your rules correctly. But keep in mind that `!important` is in the spec. It exists for a reason. One good reason for using `!important` is to override code over which you have no control. – Michael Benjamin Feb 21 '17 at 03:32
I've never had to use `!important` in code I've authored. But it has come in handy on many occasions when I want to apply styles to third-party tools, such as search, translation and calendars. – Michael Benjamin Feb 21 '17 at 03:39
Thanks for the detailed explanation! – Anthony Kong Feb 21 '17 at 03:45
You shouldn't use `!important` unless you're sure you have to. It does terrible things to the cascade, the specificity, the rules in the user stylesheet etc. Its effects are much worse than using inline styles or tables! – Mr Lister Feb 21 '17 at 06:23

score 1 · Answer 2 · answered Feb 21 '17 at 06:04

1

Give a padding of the left and right of the .form-title and .divisionify

.divisionify {
  margin-left: -15px;
  margin-right: -15px;
}
.form-title{
  margin-left: -15px;
  margin-right: -15px;
}

Check live

answered Feb 21 '17 at 06:04

Siful Islam

1,906
3
21
31

I have already mentioned this inside the question. I am asking if there is better alternative. – Anthony Kong Feb 21 '17 at 08:00
yes! you call column class on `form-group` . like `form-group col-md-12` . – Siful Islam Feb 21 '17 at 10:38

score 0 · Answer 3 · edited May 23 '17 at 12:31

The problem with using the !important thing is that everything will end up being important to you. I would use parent-to-child calls example:

#father.child{margin-right: 0px; margin-left: 0px;}.

With this, you will govern without using the !important. Think that using the !important you are going to change the default responsive of Bootstrap to the whole page for this case.

DOC:What are the implications of using "!important" in CSS?

score 0 · Answer 4 · answered Feb 21 '17 at 08:33

You can add an additional id to the elements and style them according to your wish. In this way you can avoid !important. This is the way preferred by me.

Edited code snippet

.divisionify {
  margin-bottom: 5px;
  position: relative;
  border-top: 2px solid gray;
  
}

.form-title {
  position: relative;
  color: #7cc0e1;
  font-size: 20px;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 5px;
}
#applyPlan {
margin-left: -15px;
margin-right: -15px;
}
#division {
 margin-left: -15px;
 margin-right: -15px;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
    <div id= "applyPlan" class="form-title">Apply for Plan</div>
    <div id="division" class="divisionify"></div>

    <form class="form-horizontal">
      <div class="form-group">
        <label for="institution-type" class="control-label">Type of institution</label>
        <div class="">
          <input type="email" class="form-control" id="institution-type" placeholder="Type of institution">
        </div>
      </div>
      <div class="form-group">
        <label for="name" class="control-label">Name</label>
        <div class="">
          <input type="text" class="form-control" id="name" placeholder="Name">
        </div>
      </div>
      <div class="form-group">
        <div class="">
          <button type="submit" class="btn btn-default">Apply</button>
        </div>
      </div>
    </form>
  </div>
</div>

How to fix the alignment issue of the header with the rest of the bootstrap form controls?

4 Answers4