Align element with input (and not with label) - Bootstrap 3

Question

In my test case, I'm up to aligning in columns an input with its label and a hyperlink. The problem is that hyperlink gets aligned to label, and not to input:

The code is as follows:

       <div class="row">

            <div class="form-group col-xs-4">
                <label class="form__label" for="form__field__recipientId">CÃ³digo
                    beneficiario </label> <input class="form-control input-md col-xs-8"
                    id="form__field__recipientId" name="form__field__recipientId"
                    type="text" placeholder="Introduce ordenante">
            </div>

            <div class="form-group col-xs-4">
                <a class="form__side__hyperlink" href="">Buscar beneficiario</a>
            </div>

        </div>

I have tried many things, mainly form-inlining the elements, but I don't think I'm doing it correctly since I end up messing things up.

What you actually want to get? To align the hyperlink to the bottom (In vertical) ? — Abin Thaha Azees
– Abin Thaha Azees, Commented Aug 7, 2017 at 6:07

Aslam · Accepted Answer · 2017-08-07 06:17:08Z

1

I would do this in the current situation. Hope this helps you. As the hyperlink is part of the form input so I will keep it together instead of putting it inside another form-group.

.form__side__hyperlink {
  position: absolute;
  left: 100%;
  bottom: 10px;
  /* or bottom 0 if you want it on the bottom */
  white-space: nowrap;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">

  <div class="form-group col-xs-4">
    <label class="form__label" for="form__field__recipientId">CÃ³digo  beneficiario </label>
    <input class="form-control input-md col-xs-8" id="form__field__recipientId" name="form__field__recipientId" type="text" placeholder="Introduce ordenante">
    <a class="form__side__hyperlink p-t-20" href="">Buscar beneficiario</a>

  </div>

</div>

answered Aug 7, 2017 at 6:17

Aslam

9,6985 gold badges39 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abin Thaha Azees Over a year ago

positioning using absolute is not a good solution for this problem. It may cause issues in responsive designs. So the better solution is to use flexbox instead.

xabi_sides Over a year ago

I'm sticking with this answer, since I can isolate this kind of element (input + hyperlink aligned) more easily.

Abin Thaha Azees · Accepted Answer · 2017-08-07 06:10:37Z

1

I hope this might help you.

.row {
    display: flex;
    align-items: flex-end;
}

But instead of giving it to the .row, give it another class name and apply the styles to that particular class only.

answered Aug 7, 2017 at 6:10

Abin Thaha Azees

4,7833 gold badges16 silver badges44 bronze badges

4 Comments

Aslam Over a year ago

This is going to mess everything. I don't recommend using it on row with BS3.

Abin Thaha Azees Over a year ago

That's why I asked to give another class name for that div and give the styles to that particular class.

xabi_sides Over a year ago

Hi Abinthaha, I've tried your approach. While it does the trick, it does mess the form structure. I have tried to replicate the .row class into a .flex__row, but still changes the spacing between elements. Thanks for the flex value, didn't know about that :)

Abin Thaha Azees Over a year ago

flex is the latest css3 display property. once you just know it, you can create any structure using it. That's its advantage. Yeah, of course, there is a possibility that your structure may get messed up. give flex-grow: 1 to the direct child (.form-group in your case). Instead of applying it directly, give another class name to it and apply the styles to that class.

Collectives™ on Stack Overflow

Align element with input (and not with label) - Bootstrap 3

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related