CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
methuselah
methuselah

Reputation: 13216

Adjusting position of elements in second column

How do I vertically center the items in the second column like this:

enter image description here

I am using Bootstrap 3, and there doesn't seem to be a clear cut way of achieving this.

Fiddle here https://jsfiddle.net/sqygt2gt/3/.

<div class="row remove-row-margins">
    <div class="col-sm-6">
        <div class="fluid-media">
        <iframe src="https://www.youtube.com/embed/QyIIeQbL1Zo" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
        </iframe>
        </div>
    </div>
    <div class="col-sm-6">
        <div style="text-align: center; margin-bottom: 2em">
            <h3 style="margin-top: 0px;">Get in touch to create your account today</h3>
        </div>
        <form>
            <div class="form-group">
                <input class="form-control" placeholder="Brand Name">
            </div>
            <div class="form-group">
                <input class="form-control" placeholder="Email">
            </div>
            <div class="form-group">
                <input class="form-control" placeholder="Contact Number">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block">Sign up</button>
            </div>
        </form>
    </div>
</div>

Upvotes: 0

Views: 33

Answers (1)

Bhuwan
Bhuwan

Reputation: 16855

Try to use flex in .remove-row-margins. Use align-items: center to vertically align the items center.

More help to understand flex

Updated Fiddle

.remove-row-margins {
  margin-right: 0px;
  margin-left: 0px;
  display: flex;
  align-items: center;
}

Upvotes: 1

Related Questions