CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Aymen Rizwan
Aymen Rizwan

Reputation: 57

Centering input inside bootstrap column

<form class="form-horizontal">
    <div class="form-group orange-container">

    <div class="col-sm-4">
        <h4 class="black-container"> Title </h4>
        <div class="black-container2"> What do you want to raise money for? </div>
    </div>

    <div class="col-sm-8 blue-container2">
        <input type="email" class="form-control black-container3" id="email" placeholder="Enter email">
    </div>
</div>

None of the divs classes have any formatting except for the orange-container which has a 100% width and 80px height. I cant get the input to vertically center inside the blue-container2 Tried using vertical-align: middle and display:table-cell on blue-container to no effect.

Upvotes: 0

Views: 1086

Answers (3)

Mohd Asim Suhail
Mohd Asim Suhail

Reputation: 2292

Use flex box layout.

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > .col-sm-8,
.vertical-align > .col-sm-8 {
  display: flex;
  align-items: center;
  justify-content: center; 
}

See it in action: https://jsfiddle.net/pcxdek1t/

Upvotes: 1

grinmax
grinmax

Reputation: 1855

.orange-container {
  display: flex;
  align-items: center;
}

if use FlexBox, but you use Bootstrap3

Upvotes: 0

Dan Weber
Dan Weber

Reputation: 1237

Bootstrap provides a "text-center" class that you can apply by doing the following:

<div class="col-sm-4 text-center">

http://getbootstrap.com/css/#type-alignment 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form class="form-horizontal">
    <div class="form-group orange-container">

    <div class="col-sm-4 text-center">
        <h4 class="black-container"> Title </h4>
        <div class="black-container2"> What do you want to raise money for? </div>
    </div>

    <div class="col-sm-8 blue-container2">
        <input type="email" class="form-control black-container3" id="email" placeholder="Enter email">
    </div>
      
    </div>
  </form>

Upvotes: 0

Related Questions