CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Apostolos
Apostolos

Reputation: 8101

Aligning elements in html using bootstrap classes

I have the following code

html page(part of it)

<div class="container">
  <div class="right-page col-md-9">
    <div class="row">
      <div class="category-item col-md-4">
        <form action="/settings/category/2/" method="post" class="form-inline">
          <div class="container">
            <div class="row input-container">
              <div class="form-group">
                <div class="col-md-8">
                  <input class="form-control input-sm col-md-3" type="text" value="KONS ">
               </div>
               <div class="col-md-3">
                  <input class="form-control input-sm col-md-3 myColorPicker">
                </div>
              </div>
            </div>
          </div>
          <div class="container">
            <div class="row btn-container">
              <button class="btn btn-default btn-sm edit-category">Cancel</button>
              <button name="delete" class="btn btn-default btn-sm">Delete</button><input type="submit" name="submit" class="btn btn-default btn-sm" value="Save">
            </div>
          </div>
        </form>                                         
      </div>
    </div>
  </div>

and the css (part of it)

.diagnosis-phrase, 
.treatment-phrase,
.category-item{
    padding-bottom: 1em;
    padding-top: 0.5em;
    border: 1px solid black;
    margin-bottom: 0.5em;
}  

.diagnosis-phrase input[type="text"],
.treatment-phrase input[type="text"],
.category-item input[type="text"]{
    margin-bottom:0.5em;
}

.category-item p{
    padding-left: 0.5em;
    padding-bottom:0.3em;
    border-radius:0.5em;
    width:50%;
}

The bootply for it. The part of html is the right column of a two column webpage. As you can see inside the div with black border I have two input boxes(For some reason the second appears outside the div with borders but in my working code appears correctly. Maybe because of me providing part of page.). My problem is that the first one is not aligned with the Cancel button. How can I do that using bootstrap classes?

Upvotes: 1

Views: 80

Answers (1)

Pete
Pete

Reputation: 58462

if you use the following styles

.form-group .col-md-8:first-child {padding-left:0;}

It should fix your problem

Or if you just change the col-md-8 class on your div to col-md-pull-8 it should also achieve the same thing

Upvotes: 1

Related Questions