Newly designed Bootstrap 4 input field with search feature positioned off-center on smaller screens

I have successfully positioned an input text next to a button as shown below:

While it displays perfectly on a regular computer screen, the alignment gets skewed when viewed on a phone device:

This is the functional code I am using:

<!-- Add Filer Form -->
<div class="row py-4 bg-darkblue">
    <div class="col-md-12">
        <form>
            <div class="form-group row offset-md-1">
                <label for="filerAddress" class="col-sm-2 col-form-label text-white font-weight-bold">Filer ID</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="filerAddress" placeholder="">
                </div>

                <button type="button" class="btn px-5 btn-light">
                    <i class="fas fa-search"></i>
                </button>
            </div>
            <div class="form-group row offset-md-1">
                <label for="filerName" class="col-sm-2 col-form-label text-white font-weight-bold">Filer Name</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="contact" placeholder="">
                </div>

                <button type="button" class="btn px-5 btn-light">
                    <i class="fas fa-search"></i>
                </button>
            </div>
            <div class="form-group row offset-md-1">
                <label for="filerType" class="col-sm-2 col-form-label text-white font-weight-bold">Filer Type</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="contact" placeholder="">
                </div>      

                <button type="button" class="btn px-5 btn-light">
                    <i class="fas fa-search"></i>
                </button>                           
            </div>
        </form>
    </div>
</div>
<!-- #END# Add Filer Form -->

How can I resolve this disparity? What should I keep in mind to avoid similar issues while creating more in the future?

cssbootstrap-4

Answer №1

Replace col-sm-6 with col-6, Use offset-md-1 replace with offset-1 Switch col-sm-2 to col-3

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<!-- Add Filer Form -->
<div class="container-fluid">
<div class="row py-4 bg-secondary">
<div class="col-md-12">
    <form>
        <div class="form-group row offset-1">
            <label for="filerAddress" class="col-3 col-form-label text-white font-weight-bold">Filer ID</label>
            <div class="col-6">
                <input type="text" class="form-control" id="filerAddress" placeholder="">
            </div>

            <button type="button" class="btn px-5 btn-light">
                <i class="fas fa-search"></i>
            </button>
        </div>
        <div class="form-group row offset-1">
            <label for="filerName" class="col-3 col-form-label text-white font-weight-bold">Filer Name</label>
            <div class="col-6">
                <input type="text" class="form-control" id="contact" placeholder="">
            </div>

            <button type="button" class="btn px-5 btn-light">
                <i class="fas fa-search"></i>
            </button>
        </div>
        <div class="form-group row offset-1">
            <label for="filerType" class="col-3 col-form-label text-white font-weight-bold">Filer Type</label>
            <div class="col-6">
                <input type="text" class="form-control" id="contact" placeholder="">
            </div>      

            <button type="button" class="btn px-5 btn-light">
                <i class="fas fa-search"></i>
            </button>                           
        </div>
    </form>
</div>
</div>
</div>
</body>
</html>

Answer №2

Hopefully, this solution resolves your issue.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />


<!-- Add Filer Form -->
<div class="container">
  <div class="row py-4 bg-darkblue">
    <div class="col-md-12">
      <form>
        <div class="form-group offset-md-1">
          <div class="row">
            <label for="filerAddress" class="col-12 col-sm-2 col-form-label font-weight-bold">Filer ID</label>
            <div class="col-8">
              <input type="text" class="form-control" id="filerAddress" placeholder="">
            </div>
            <div class="col-4 col-sm-2">
              <button type="button" class="btn btn-primary">
<i class="fas fa-search"></i> Search
</button>
            </div>
          </div>
        </div>
        <div class="form-group offset-md-1">
          <div class="row">
            <label for="filerAddress" class="col-12 col-sm-2 col-form-label font-weight-bold">Filer ID</label>
            <div class="col-8">
              <input type="text" class="form-control" id="filerAddress" placeholder="">
            </div>
            <div class="col-4 col-sm-2">
              <button type="button" class="btn btn-primary">
<i class="fas fa-search"></i> Search
</button>
            </div>
          </div>
        </div>
        <div class="form-group offset-md-1">
          <div class="row">
            <label for="filerAddress" class="col-12 col-sm-2 col-form-label font-weight-bold">Filer ID</label>
            <div class="col-8">
              <input type="text" class="form-control" id="filerAddress" placeholder="">
            </div>
            <div class="col-4 col-sm-2">
              <button type="button" class="btn btn-primary">
<i class="fas fa-search"></i> Search
</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show an error notification if the mobile device does not meet the requirements for jquery mobile version

Currently, I am in the process of creating a website using HTML5, CSS3, and jquerymobile. My goal is to have an error message appear saying "Your mobile browser does not support this application" if the page is not rendering correctly or if the jquery mobi ...

jqueryhtmlcssjquery-mobile

Slower CSS rendering as Javascript finishes its tasks

I am currently dealing with a jQuery plugin that is quite large and complex, but I will not be sharing it here to keep things simple. The issue I am facing is relatively straightforward, so I will focus on the essential code snippets: There is a click eve ...

javascriptjquerycssclickpseudo-element

Utilizing Bootstrap 5 Grid to blend fixed and dynamic width elements within a single row

I am currently working on developing a grid system for my Blazor application that features small fixed-size columns with one large column. Instead of dividing the grid into 12 columns using col-xs-*, I have opted to set custom widths without using the col ...

htmlcssbootstrap-5

Ways to adjust the brightness of any color when hovered over

Is it possible to create a universal effect where an element becomes darker or lighter when hovered over, regardless of the initial color? Here is an example: .change-color{ Background:green; width:100px; height:100px } .change-color:hover{ Background ...

javascriptjqueryhtmlcss

Adjust the height of the `<input type="file">` element to match the containing div by utilizing Bootstrap 4.5 styling

Can I update the .html file to give the "Choose File" and "Upload" options the same height as the "Upload" button in the second div, which has the py-4 tag? <div class="input-group"> <div class="custom-file py-4"> < ...

htmlinputbootstrap-4height

Tips for creating a table that fills the height of its parent div without surpassing it

Issue: I am facing a challenge with making a <table> element fill 100% of its container's height dynamically, without going over the limit. Context: When the height of the <table> surpasses that of the container, I want the ability to s ...

htmlcsshtml-table

Aligning an SVG icon at the center of a button

I have elements that are currently being used as buttons, but I want to switch them out for actual button tags. This would improve accessibility and allow keyboard navigation using the tab key to focus on my buttons. Each button contains a centered SVG ima ...

htmlcsssvgbutton

Having difficulty navigating the website due to the inability to scroll

I am experiencing a problem on this website where I am unable to scroll. Visit www.Batan.io After loading the website for the first time, the trackpad (mac) works fine initially but then the scroll function stops working. Although the sidebar works, chan ...

htmlcssscroll

Using JQuery to iterate through every unique div id in the HTML document

i am attempting to utilize jquery to iterate through each div tag that has an id of "rate". The goal is for jquery to execute a function on the individual divs. Here is my code snippet: information.html <html> <input class="rate" type="hidden ...

javascriptphpjqueryhtmlcss

"Utilizing Bootstrap's Table Features within the Moodle Platform

Hey there! I'm currently in the process of updating a client's Moodle website. Our goal is to create responsive tables on the homepage, but I've encountered some challenges. Due to conflicts with other Moodle libraries, I wasn't able to ...

cssmoodlebootstrap-table

Locate the parent element that has the smallest amount of space taken up by its child elements

My goal is to determine which container, among several <divs>, each containing multiple child <divs> of varying sizes, has the smallest amount of space covered by the child elements. <div class="container" id="first"> ...

javascripthtmlcss

Accidental delay upon mouse exit

Upon hovering over, the transition immediately begins, but there is a delay of about 300ms before the reverse transition starts upon hovering off. (https://example.com) <div id="isa-hover-gallery"> <a href="https://example-link.com"> <div ...

csscss-transitions

Font modification is unsuccessful in Vue-Material

Here is a snippet from my App.vue file where I encountered an issue with changing the font in the md-tabs component, taken from . The CSS line: background: #42A5F5; works perfectly fine, but this one does not: color: #E3F2FD; App.vue: <template> ...

cssvue.jsvuejs2componentsvue-material

Problem with CSS animations in IE10

I've encountered a problem with a specific section of a website I created. This section functions perfectly on all browsers and older versions of Internet Explorer, but not on the latest versions. It seems that IE no longer supports [IF] statements in ...

htmlcssanimationfadeinternet-explorer-11

Problem with resizing in CSS and jQuery

I need help creating a chatbox that can be resized. I've almost got it, but the bottom part of the chatbox detaches when I resize it. Also, I'm having trouble making the userList a fixed size that won't be affected by resizing. Check out th ...

javascriptjquerycss

Is there a way to align all the content in a Bootstrap card to the center?

Need help centering content in a bootstrap card for my semester project. Can't seem to get it right! If anyone can assist, I would really appreciate it. Also hoping to increase the height of the card if possible. <link rel="stylesheet" href= ...

htmlcssbootstrap-5

The background image on my link bar is inexplicably not appearing

I've been trying to solve this issue for hours and I'm at a loss. Initially, the background image was displaying correctly, but now it's not working. HTML: <head> <link type="text/css" rel="stylesheet" href="css/normalize.css" ...

phphtmlcssimagebackground

Running the command "nexrjs create next-app" successfully generates all the necessary directories for the

After trying to install NextJS using both methods npm install next react react-dom and npx create-next-app appname, I noticed that my project directories are different from what they are supposed to look like: Instead of having pages, api(_app.js, index.j ...

javascripthtmlcssnode.jsnext.js

Adjust the size of the image obtained from the JSON data

I am currently working on parsing JSON data which includes an image field that I want to adjust to a specific size. Despite my many attempts at tweaking the code, I seem to have lost track of why it is not functioning as desired. JSON var items=[]; ...

cssjson

What is the best way to reduce the size of a Bootstrap card image back to its original dimensions when

I am currently experimenting with a bootstrap card using HTML, CSS, and Bootstrap. My main focus right now is on how to shrink the image when hovering over it. The .card-header-img has a fixed height of 150px that I do not want to modify. What I want to a ...

htmlcssbootstrap-5