Navbar adjustment in bootstrap

Question

The email input and submit button are not aligning in one line. I can align it in one line by adjusting width but it will not be as effective for all devices.

How to dynamically make to use available width & height and auto adjust.

https://code.sololearn.com/WAtPC2NHz4H9/?ref=app

Answer 1

.form-row at parent

then

.col or .col-x at middle container

Example :

<form>
<div class="form-row">
<div class="col-7">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="State">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
</form>

Reference :

https://getbootstrap.com/docs/4.0/components/forms/#column-sizing

edit :
https://code.sololearn.com/WUIovWWSxYsN/?ref=app

remarks:

you shouldn't nest <form> in <ul>

Answer 2

Calviղ Gordon Jaydeep Khatri Kevin ★ Aaron Eberhardt please see this.

Answer 3

Sorry not sure about how LinkedIn app works.

Answer 4

Thanks Gordon . I am facing another problem. Generally what I have observed with my website and other people's website is that when it is opened in LinkedIn(in it's own browser) it disturbs all the fonts/design/alignment etc. Why ? How to correct it ?

Answer 5

What's LinkedIn's own browser?

Answer 6

Gordon I mean, if it opens in the LinkedIn app only and not on any other browser on the phone.