CODEWITHSUNDEEP
htmlcssbootstrap-4navbarbootstrap-5
TiagoRibeiro
TiagoRibeiro

Reputation: 316

Bootstrap form-inline not working, how can I prevent them from stacking?

I have a very basic test navbar, with a search input box and respective search button. I'm using Bootstrap class form-inline, yet the search button is going below the search input, altho there is plenty of space. You can check the codepen here so you can test it. Either way the html code is this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nav</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>


<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-warning">
        <a href="#none" class="navbar-brand">MarcaX</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#expand">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="expand">
            <div class="navbar-nav">
                <a href="#link1" class="nav-item nav-link">Link1</a>
                <a href="#link2" class="nav-item nav-link">Link2</a>
                <a href="#link3" class="nav-item nav-link">Link3</a>
            </div>
            <form class="form-inline ms-auto">
                <input class="form-control mr-sm-2" type="search">
                <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

This is something supposed to work without taking the button outside the form tag, and supposedly without any css.

Upvotes: 1

Views: 5077

Answers (1)

Pof
Pof

Reputation: 979

You are calling bootstrap v5, and .form-inline is dropped since v5 : https://getbootstrap.com/docs/5.0/migration/#forms-2

You should use .row and .col to build your form layout

<form class="row ms-auto">
  <div class="col">
      <input class="form-control mr-sm-2" type="search">                
  </div>
  <div class="col-auto">
      <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
  </div>
</form>

You can find everything here : https://getbootstrap.com/docs/5.0/forms/layout/

Upvotes: 10

Related Questions