While creating a search view for a website, I noticed that the search box and submit button placed next to it (aligned to the right at most screen widths) would become misaligned in very small max-widths.
Using Bootstrap 4, I utilized ".ml-auto" to align these elements to the left of the navbar. It worked fine except for this particular case (as I understand that elements in navbars behave differently in Bootstrap). The CSS and JS files are imported correctly (I double-checked before writing this). Here are snippets of the code displaying the issue:
HTML
<div class="container"> <header id="head"> <h1 class="page-header float-left">bitDump</h1> <div class="clearfix"></div> </header> <section id="mainBody"> <nav class="navbar navbar-expand-sm navbar-dark navbar-tweak"> <form class="form-inline my-2 my-md-0 ml-auto"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0 ml-auto" type="submit">O</button> </form> </nav> </section>Custom CSS (complementing Bootstrap's)
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: none;
color: #000;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #ddd;
font-weight: normal;
}
.navbar-tweak {
border-radius: 5px;
background-color: #6c757d;
border-color: #5a6268;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.page-header {
padding-bottom: 5px;
margin: 20px 0 10px;
border-bottom: 1px solid #eee;
}
The misalignment can be viewed on , specifically on vertical phone resolution (approximately 360px wide).
Any suggestions on how to rectify this issue?