Displaying both input fields and buttons side by side on mobile devices using Bootstrap

I am in the process of creating a navbar that includes select, input, and button elements. Below is the code I have written:

<nav class="navbar sticky-top navbar-light p-0">
<div class="collapse navbar-collapse search-bar show p-4" id="navbarSupportedContent">
    <div class="col-md-8 mx-auto">
        <form>
            <div class="row">
                <div class="col-md-3 pr-md-0">
                    <select class="form-control form-style-w3layout"
                            style="background: #011144; color: #fff" id="exampleFormControlSelect1">
                        <option>Deutsch - English</option>
                        <option>English- Deutsch</option>
                    </select>
                </div>
                <div class="form-row col-md-9 pl-md-0">
                    <div class="col-xs-10 col-md-10 pr-md-0">
                        <input type="text" class="form-control form-style-w3layout"
                               id="autocomplete" placeholder="Search Deutsch" required>
                    </div>
                    <div class="col-xs-2 col-md-2 pl-md-0">
                        <button class="form-control form-style-w3layout-btn"><span class="fa fa-search"></span>
                        </button>
                    </div>

                </div>
            </div>
        </form>
    </div>
</div>

Here is the output image:

https://i.sstatic.net/LgIbj.png

However, when viewing on a mobile device, there are issues. The input and button elements appear on separate rows and there is no margin between the select and input elements.

Below is an image showing the mobile output:

https://i.sstatic.net/xviBf.png

csstwitter-bootstrapbootstrap-4

Answer №1

If you are looking to incorporate the input group from Bootstrap into your project, simply refer to Bootstrap's official documentation. This will provide you with all the necessary information.

<nav class="navbar sticky-top navbar-light p-0">
  <div class="collapse navbar-collapse search-bar show p-4" id="navbarSupportedContent">
    <div class="col-md-8 mx-auto">
      <form>
        <div class="row">
          <div class="col-md-3 pr-md-0 mb-3 mb-md-0">
            <select class="form-control form-style-w3layout" style="background: #011144; color: #fff"
              id="exampleFormControlSelect1">
              <option>Deutsch - English</option>
              <option>English- Deutsch</option>
            </select>
          </div>
          <div class="col-md-9 pl-md-0">
            <div class="input-group mb-3">
              <input type="text" class="form-control form-style-w3layout" id="autocomplete" placeholder="Search Deutsch"
                required>
              <div class="input-group-append">
                <button class="form-control form-style-w3layout-btn">
                  <span class="fa fa-search"></span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</nav>

If you prefer utilizing the grid system, consider incorporating a new row element. See below for an example:

<nav class="navbar sticky-top navbar-light p-0">
  <div class="collapse navbar-collapse search-bar show p-4" id="navbarSupportedContent">
    <div class="col-md-8 mx-auto">
      <form>
        <div class="row">
          <div class="col-md-3 pr-md-0 mb-3 mb-md-0">
            <select class="form-control form-style-w3layout" style="background: #011144; color: #fff"
              id="exampleFormControlSelect1">
              <option>Deutsch - English</option>
              <option>English- Deutsch</option>
            </select>
          </div>
          <div class="col-md-9 pl-md-0">
            <div class="row">
              <div class="col-10 col-md-6 pr-0">
                <input type="text" class="form-control form-style-w3layout" id="autocomplete" placeholder="Search Deutsch" required>
              </div>
              <div class="col-2 col-md-2 pl-0">
                <button class="form-control form-style-w3layout-btn"><span class="fa fa-search"></span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</nav>

Answer №2

Check this out

<nav class="navbar sticky-top navbar-light p-0">
<div class="collapse navbar-collapse search-bar show p-4" id="navbarSupportedContent">
    <div class="col-md-8 mx-auto">
        <form>
        <div class="row">
          <div class="col-md-12 col-lg-4 p-0">
                    <select class="form-control form-style-w3layout"
                            style="background: #011144; color: #fff" id="exampleFormControlSelect1">
                        <option>Italian - English</option>
                        <option>English - Italian</option>
                    </select>
                </div>
          <div class="col-md-12 col-lg-6 p-0">
                <input type="text" class="form-control form-style-w3layout" id="autocomplete" placeholder="Search Italiano" required>
              </div>
          <div class="col-md-12 col-lg-2 p-0">
                    <button class="form-control form-style-w3layout-btn"><span class="fa fa-search"></span>
                    </button>
                </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

What are some strategies to stop text from causing the container height of the <li> element to expand?

Link to my code on Plunker In my attempt to create a fluid layout, the sidebar of my site consists of a list of links. I am trying to make each <li> element a perfect square, but when I add text inside, it disrupts the dimensions and turns the squar ...

css

Determining the Status of the Pagination Button: How to See If It's Active or

On my webpage, there are navigation options at the bottom to go to different pages (e.g. previous, 1, 2, 3, 4, Next). I need help in checking if the 'Next' button is enabled or disabled using Java Selenium Webdriver. Can someone assist me with th ...

javatwitter-bootstrapseleniumselenium-webdriverpagination

Issue with alignment of Bootstrap inline form field on top and bottom levels

I seem to be encountering an issue highlighted in the image below: My goal is to have the state dropdown perfectly aligned with the top and bottom edges of the other two controls. Here's the code snippet I've used to create this section of the i ...

jqueryhtmlcsstwitter-bootstrap

Pictures failing to appear in css/jquery slider

I have a total of 12 divs that are configured to display a thumbnail along with some text dynamically retrieved from a database query. When displayed individually, they appear fine in a column format with a border around them showcasing the thumbnail and t ...

jquerycsseasyslider

CSS - revealing additional submenu on hover

I'm currently working on customizing a Wordpress menu that includes classic menu items and their respective submenus. The issue I'm facing is that when I hover over an item with children, its submenu will display. However, I want to have a fixed ...

htmlwordpresscsshover

Adjust the appearance attribute of FormField within the designated theme

Currently, I am collaborating within an NX Monorepo and utilizing a shared ui-components library that extends the capabilities of Angular Material Components. Despite using different themes for various applications, I am aiming to incorporate appearance=&a ...

cssangularangular-material

In Angular 10, the custom CSS URL is loading after the standard styles.css file

Below is the configuration from my angular.json file: "options": { "outputPath": "dist/example", "index": "src/index.html", "main": "src/main.ts", ...

cssangularsassangular10

Achieving uniform cell height distribution in Foundation XY-grid using flexbox

When utilizing the Foundation XY-grid, I encountered an issue with distributing cell heights evenly within a nested grid-y inside a cell using the .auto class on the parent cell. In a scenario with 2 cells in a grid-y, the desired outcome is 50%/50%. This ...

htmlcssflexboxzurb-foundation

Text in gray overlaying image background

I am attempting to design a layout that resembles the following: https://i.sstatic.net/S5CCK.jpg Although I can create the letter "A" using svg or clip-path, my challenge lies in maintaining the background inside the "A" aligned with the body background. ...

htmlcsssvgcss-shapes

Tips for maximizing page layout efficiency without compromising on element visibility

What is occurring https://i.stack.imgur.com/Agjw6.gif The use of .hide() and .fadeIn(200) is resulting in a jittery effect that I would like to avoid. Desired Outcome When the user hovers over the menu icon, the menu icon should vanish the text "Pr ...

javascriptjqueryhtmlcss

What steps can be taken to design a unique CSS pop-up that triggers upon page load, limited to one appearance per visitor every week

I have the following code snippet that allows me to display a pop-up either by clicking on the link or hovering over it. I am looking to modify it so that the pop-up opens when the page loads and restrict it to open only once per visitor per week. As some ...

javascripthtmlcssjquery

Select the small image to reveal the larger overlay image

I have a grid of images and I want each image to expand into fullscreen when clicked. However, the JavaScript I am using is causing only the last image in the grid to overlay. How can I resolve this issue? Here is the code I am currently using: http://js ...

javascriptjqueryhtmlcssimage

"Interactive feature allowing users to edit and view the most recently inserted HTML

My approach involves using a contenteditable div as an input field for entering text and inserting icons through a button that adds small HTML pictures within the text. Everything works fine when the text is narrower than the contenteditable field. Howev ...

jqueryhtmlcsscontenteditable

Using background-image in Internet Explorer has always been a challenge

HTML <div id="banner" style="display: block; background-image: url('images/swirl_home.gif'); background-repeat: no-repeat; background-color: #e7e7e7;"> <div id="Hi"> some text here... </div> & ...

htmlcsscross-browser

Enhancing Your Website with Animation Delay using Animate.css and ViewportChecker

I am attempting to apply a delay to various elements with animated classes on a specific webpage using animate.css version 3.5.1 by Daniel Eden and jquery-viewport-checker version 1.8.7 by Dirk Groenen. My initial approach was to utilize the setTimeout fu ...

jquerycssanimationviewport

What is the best way to insert horizontal padding into each line of a single sentence that is wrapped on multiple lines

Below is the code snippet I am working with: <div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div> Here is a screenshot of how it currently appears: I am looking for a way to add paddi ...

csshtml

Modifying the attributes/properties within a class of a bootstrap button

Here is the code that I have: <b-button id="search-button" size="md" class="mt-1 w-100" type="submit" @click="someEvent()" >Example </b-button If we imagine calling someEvent() and wanting to modi ...

javascriptcssvue.jsbootstrap-4bootstrap-vue

What is the correct syntax for implementing scrollTop and transform CSS effects in jQuery?

I find myself in a bit of a quandary, as this question may seem rather simple but it's causing me some confusion. I'm trying to navigate the CSS transform syntax within a jQuery script that calculates window height. Here is the code in question: ...

javascriptjquerycssjquery-ui

What steps can I take to bring this idea to life in my gallery?

Currently, I am facing a roadblock while transitioning my design concept into actual code. My main concern lies with creating this art piece. Although the gallery is up and running with all the images in place, I'm encountering difficulties with the s ...

javascripthtmlcss

Leveraging IE conditional comments for including CSS or JavaScript files can lead to an increase in the number of HTTP

Our web designer has implemented special pages for Internet Explorer by using IE-specific comments. This means that certain stylesheets are only loaded if the user is using a specific version of IE: <!--[if lt IE 7]> <link type="text/css" rel="st ...

javascriptcssinternet-explorerconditional-comments