CODEWITHSUNDEEP
formsinputbootstrap-4flexboxalignment
DCR
DCR

Reputation: 15665

how to align form items with bootstrap

Please exam the snippet in full page mode. The first navbar is fine. I tried to reduce the width of the search input but when I do that I can no longer get the links to move all the way to the right as in the first example. Can someone explain what's controlling the the width of the form and how do I adjust it to achieve the desired result

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

        <title>Bootstrap Sandbox</title>
    </head>

    <body>
    <nav class='navbar navbar-expand-md bg-primary navbar-light mb-3'>
            <div class='container'>
                <a class='navbar-brand' href="#">NavBar </a>
                <button class="navbar-toggler" data-toggle='collapse' data-target='#navbarNav2'>
                    <span class='navbar-toggler-icon'></span>
                </button>
                <div id='navbarNav2' class='collapse navbar-collapse '>
                    <ul class='navbar-nav ml-auto'>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">Home</a>
                        </li>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">About</a>
                        </li>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">Services</a>
                        </li>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">Contact</a>
                        </li>
                    </ul>
                    <form class="form-inline justify-content-end ">
                        <input type="text" class="form-control " placeholder='Search'>
                        <button class="btn btn-outline-success">Search</button>
                    </form>
                </div>
            </div>
        </nav>
        
         <nav class='navbar navbar-expand-md bg-primary navbar-light'>
            <div class='container'>
                <a class='navbar-brand' href="#">NavBar </a>
                <button class="navbar-toggler" data-toggle='collapse' data-target='#navbarNav3'>
                    <span class='navbar-toggler-icon'></span>
                </button>
                <div id='navbarNav3' class='collapse navbar-collapse '>
                    <ul class='navbar-nav ml-auto'>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">Home</a>
                        </li>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">About</a>
                        </li>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">Services</a>
                        </li>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">Contact</a>
                        </li>
                    </ul>
                    <form class="form-inline justify-content-end ">
                        <input type="text" class="form-control w-50" placeholder='Search'>
                        <button class="btn btn-outline-success">Search</button>
                    </form>
                </div>
            </div>
        </nav>
        
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    </body>

Upvotes: 0

Views: 41

Answers (1)

Virtual
Virtual

Reputation: 2191

I think the width of the form is based on the combined width of the search button and the input-element(with its default width).

With w-50, the input's width is reduced to half of the form's width which in-turn is based on the default width of the input element.

So, instead of setting width:50%, if you can set the width to a fixed value like width:8em, you can achieve the expected results.

enter image description here

Upvotes: 1

Related Questions