Bootstrap 4 not displaying my input and button inline-block

Question

I can't seem to figure out why my input search and button are stacking and not displaying inline.

<nav class="navbar navbar-expand-sm navbar-light bg-light">
        <a class="navbar-brand" href="#">Witty</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#expandme">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="expandme">
            <div class="navbar-nav">
                <a class="nav-link" href="#">New</a>
                <a class="nav-link" href="#">Men</a>
                <a class="nav-link" href="#">Women</a>
                <a class="nav-link" href="#">Brands</a>
                <a class="nav-link" href="#">sale</a>
            </div>
            <form class="form-inline">
                <div class="form-group">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
                </div>
            </form>

        </div>


    </nav>

The search input and button appear next to each other on the same line (i.e. inlined). What is the question or problem? In which browser and on which devices does the problem occur to you? — feeela
– feeela, Commented Feb 10, 2021 at 1:38

Mohamed Bdr · Accepted Answer · 2021-02-09 22:31:35Z

You need to add Bootstrap 4 config link and scripts inside your code such like this example
(First 4 lines):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

<nav class="navbar navbar-expand-sm navbar-light bg-light">
        <a class="navbar-brand" href="#">Witty</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#expandme">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="expandme">
            <div class="navbar-nav">
                <a class="nav-link" href="#">New</a>
                <a class="nav-link" href="#">Men</a>
                <a class="nav-link" href="#">Women</a>
                <a class="nav-link" href="#">Brands</a>
                <a class="nav-link" href="#">sale</a>
            </div>
            <form class="form-inline">
                <div class="form-group">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
                </div>
            </form>

        </div>


    </nav>

Thanks! I guess I had used a wrong stylesheet link. I swapped it out with what you provided and everything works! Didnt even think of checking that part of the code. Thank you much!

Collectives™ on Stack Overflow

Bootstrap 4 not displaying my input and button inline-block

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related