CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Vickie Jack
Vickie Jack

Reputation: 95

showing input and button in one row in mobile with bootstrap

i want to design a navbar that have select, input and button elemnts. i wrote below code:

<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>

below image is output:

Desktop output

but in mobile device i have problem. input and buttun are shown in two different rows. and there is not any margin between select and input elements.

the below image is mobile output:

mobile output

Upvotes: 0

Views: 977

Answers (2)

I-lung Lee
I-lung Lee

Reputation: 131

You can use the input group in bootstrap

<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>

Or if you want to use the grid system then you can do something like the following by adding another row element wrapping around the elements you want to have a different row.

<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>

Upvotes: 1

Clemence Ayekple
Clemence Ayekple

Reputation: 116

Try this

<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>Deutsch - English</option>
                        <option>English- Deutsch</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 Deutsch" 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>

Upvotes: 0

Related Questions