Bootstrap4 control width of inline-form

Question

See below for my HTML. I want to make the search bar in the top right wider, and in general just have some control over its width. I've tried messing around with the grid system as that looks like the way to go however nothing I've tried actually managed to change the width of the search bar itself.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
        <script src="https://use.fontawesome.com/6e0448e881.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto">
                            <li class="searchbar">
                                <form class="form-inline my-2 my-lg-0" method="get">
                                    <div class="dropdown">
                                        <input name="q" id="qbox" data-toggle="dropdown" type="search" class="form-control" placeholder="Search" autofocus="autofocus" autocomplete="off" aria-haspopup="true" aria-expanded="false"/>
                                        <div id="search_results" class="dropdown-menu" role="menu" aria-labelledby="qbox">
                                            <div>a</div>
                                            <div>b</div>
                                            <div>c</div>
                                        </div>
                                    </div>
                                </form>
                            </li>
                    <li class="usericon">
                        <button class="btn" id="login_dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Log in
                        </button>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="login_dropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                </ul>
                <style>
                    .searchbar .dropdown-menu {
                    left: initial;
                    }
                    div#search_results {
                    width: 100%;
                    }
                </style>
            </div>
        </nav>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    </body>
</html>

Irf92 · Accepted Answer · 2017-12-29 12:45:33Z

2

Change the width of the form-control class

.form-inline .form-control{
   width:600px;
}

edited Dec 29, 2017 at 12:45

answered Dec 29, 2017 at 12:22

Irf92

3692 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kahr Kunne Over a year ago

Results in the following on my machine (Chrome, Arch Linux): imgur.com/Tm3KCaF

Irf92 Over a year ago

change .form-inline .form-control class width.. answer was updated

Collectives™ on Stack Overflow

Bootstrap4 control width of inline-form

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related