CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
CXJ
CXJ

Reputation: 4449

Bootstrap 3: force button to bottom of grid container

How do I get my Submit button to be placed at the bottom of the right column in my form? It should be to the right of the "text 6" input box -- not at top against bottom of "text 8" as shown in image.

enter image description here

codepen

  <form>
    <div class="row">
      <div class="col-sm-6">
        <fieldset>
          <input class="form-control" placeholder="text 1" />
          <input class="form-control" placeholder="text 2" />
          <input class="form-control" placeholder="text 3" />
          <input class="form-control" placeholder="text 4" />
          <input class="form-control" placeholder="text 5" />
          <input class="form-control" placeholder="text 6" />
        </fieldset>
      </div>
      <div class="col-sm-6">
        <fieldset>
          <input class="form-control" placeholder="text 7" />
          <input class="form-control" placeholder="text 8" />
        </fieldset>
        <fieldset>
          <button class="center-block btn btn-primary" type="submit">
            Send</button>
          </button>
        </fieldset>
      </div>
    </div>
  </form>

I've tried all the various positioning suggestions I could find here on S.O., but they all manage to fail in one way or another.

Upvotes: 2

Views: 1325

Answers (4)

Don
Don

Reputation: 4157

Another way to go about it would be to place the button below the inputs and pull it up into the space using a negative margin on the top. This doesn't account for differently sized buttons, but as said in the comments of my other solution this isn't a problem that will have many clean solutions.

https://codepen.io/anon/pen/gxpVer

CSS:

.special-container button{
  float: right;
  margin-right: 25%;
  margin-top: -33px;
}

HTML:

<body>
  <form>
    <div class="row">
      <div class="col-sm-6">
        <fieldset>
          <input class="form-control" placeholder="text 1" />
          <input class="form-control" placeholder="text 2" />
          <input class="form-control" placeholder="text 3" />
          <input class="form-control" placeholder="text 4" />
          <input class="form-control" placeholder="text 5" />
          <input class="form-control" placeholder="text 6" />
        </fieldset>
      </div>
      <div class="col-sm-6">
        <fieldset>
          <input class="form-control" placeholder="text 7" />
          <input class="form-control" placeholder="text 8" />
        </fieldset>
      </div>
      <div class="col-sm-12 special-container">
        <fieldset>
          <button class="center-block btn btn-primary" type="submit">
            Send</button>
          </button>
        </fieldset>
      </div>
    </div>
  </form>
</body>

Upvotes: 1

Don
Don

Reputation: 4157

You can use a fancy new CSS display: grid

You can use grid-gap: 5px; in order to add some spacing if you want. Limited pretty hard to the latest browsers, but this works really well.

More reading: http://gridbyexample.com

https://codepen.io/anon/pen/KvpaOm

CSS

.special-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
}

.special-container button{
  grid-column: 2;
  grid-row: 6;
}

HTML

<body>
  <form>
<div class="row">
  <div class="col-sm-12 special-container">
      <input class="form-control" placeholder="text 1" />
      <input class="form-control" placeholder="text 2" />
      <input class="form-control" placeholder="text 3" />
      <input class="form-control" placeholder="text 4" />
      <input class="form-control" placeholder="text 5" />
      <input class="form-control" placeholder="text 6" />
      <input class="form-control" placeholder="text 7" />
      <input class="form-control" placeholder="text 8" />
      <button class="center-block btn btn-primary" type="submit">
        Send
      </button>
  </div>
</div>
  </form>
</body>

Upvotes: 2

Emma Earl Kent
Emma Earl Kent

Reputation: 578

You could just add margin-top like this:

.btn {
margin-top:100px;
}

Upvotes: 1

Sam Creamer
Sam Creamer

Reputation: 5361

Try a new row

<body>
  <form>
    <div class="row">
      <div class="col-sm-6">
        <fieldset>
          <input class="form-control" placeholder="text 1" />
          <input class="form-control" placeholder="text 2" />
          <input class="form-control" placeholder="text 3" />
          <input class="form-control" placeholder="text 4" />
          <input class="form-control" placeholder="text 5" />
          <input class="form-control" placeholder="text 6" />
        </fieldset>
      </div>
      <div class="col-sm-6">
        <fieldset>
          <input class="form-control" placeholder="text 7" />
          <input class="form-control" placeholder="text 8" />
        </fieldset>        
      </div>
    </div>
    <div class="row">
      <fieldset>
          <button class="center-block btn btn-primary" type="submit">
            Send</button>
          </button>
        </fieldset>
    </div>
  </form>
</body>

EDIT: After seeing your photo, this is not exactly what you want. For that, you will have to play some more with css.

Upvotes: 1

Related Questions