Currently, I am working on creating a responsive header with Bootstrap. While the layout looks good on desktop screens, I'm encountering some alignment issues in the mobile view. To give you an idea of what I'm aiming for and the problems I'm facing:
The search bar consists of two div elements: Input type="text" and Input type="submit"
- -For the input type="text", I want it to occupy 80% of the available width and align it to the left.
- For the submit button, it should take up the remaining 10% and be aligned to the right (leaving a 10% margin).
I've attempted to use Bootstrap's d-flex, justify-content, and text-end classes, but they haven't yielded the desired layout. Below is my current code:
<header class="container-fluid">
<div class="row align-items-center">
<!-- Logo Column -->
<div class="col-md-6 col-xs-12 d-flex">
<img src="../logo_msp_Part.png" alt="Logo" class="logo">
</div>
<!-- Spacer Column (Visible in Desktop only) -->
<div class="col-3 d-none d-md-block"></div>
<!-- Search Bar Columns -->
<div class="col-2 justify-content-start">
<form>
<input type="text" class="form-control w-200" placeholder="Search" id="searchInput"gt;
</form>
</div>
<div class="col-1">
<input type="submit" value="ok" class="btn btn-primary" id="confirm_search">
</div>
</div>
</header>
I have adjusted the widths of the col-* classes to ensure proportional columns. Applied d-flex and justify-content-start/justify-content-end classes to the input fields. Tried using w-100 and w-80 classes to control the sizes of the text input and submit button respectively. Additionally, I removed my custom CSS related to the header from media queries to prevent conflicts with Bootstrap styling.