CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sam
Sam

Reputation: 4484

How to place some fields horizontal while others vertical inside a bootstrap form

I have a bootstrap form where I want some fields to be horizontal while others vertical. In the fiddle at the bottom, I want field 1 and field 2 to be in the same row and but of default size (not stretched). The button should be at center but in a separate row. How should I achieve this in bootstrap? I tried adjusting the size of text fields but it didn't work. Also, the button is not placing at the center and is too close to above form fields. Is table a good idea here? Please help me with this.

Fiddle: http://jsfiddle.net/r30kk8m4/

Upvotes: 0

Views: 226

Answers (2)

Miomir Dancevic
Miomir Dancevic

Reputation: 6852

HTML

<div class="container-fluid">
    <form class="form" role="form">        
        <div class="form-group">
            <div class="row">
                <div class="col-sm-6 col-md-6 col-xs-6">
                    <input type="text" class="form-control" placeholder="Field 1" />
                </div>
                <div class="col-sm-6 col-md-6 col-xs-6">
                    <input type="text" class="form-control" placeholder="Field 2" />
                </div>
            </div>
        </div>
                <div class="form-group text-center">
            <div class="row">
                <input type="button" class="btn btn-primary" id="continueproductdetailsbutton" value="Continue" />
            </div>
        </div>
    </form>
</div>

working fiddle http://jsfiddle.net/r30kk8m4/1/

Update You can make you buttons responsive

@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
    border-radius:3px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:4px 9px;
    font-size:90%;
    line-height: 1.2;
  }
}

Upvotes: 1

Justinas
Justinas

Reputation: 43479

Edit your layout (removed .row, moved button to separate .form-group), apply some clear: both;. Since button is inline element, you can apply text-align: center; (<center> is deprecated).

.no-gutter-left {
  padding-left: 0 !important;
}
.no-gutter-right {
  padding-right: 0 !important;
}
.clear {
  clear: both;
}
.tac {
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <form class="form" role="form">
    <div class="form-group">
      <div class="col-xs-6 no-gutter-left">
        <input type="text" class="form-control" placeholder="Field 1" />
      </div>
      <div class="col-xs-6 no-gutter-right">
        <input type="text" class="form-control" placeholder="Field 2" />
      </div>
      <div class="clear"></div>
    </div>
    <div class="form-group tac">
      <input type="button" class="btn btn-primary" id="continueproductdetailsbutton" value="Continue" />
    </div>
  </form>
</div>

Upvotes: 0

Related Questions