CODEWITHSUNDEEP
twitter-bootstrap
nize
nize

Reputation: 1032

Why is the navbar-text item shifted to a new line?

I have problems understanding and making a twitter bootstrap navbar work. I want a link "About" to the far right, but it skips to a new line irrespectively of the browser window size.

            <nav id="navbar" class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">
                        <!--img alt="Brand" src="images/logo-38-38.gif"-->App Name
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <form class="navbar-form" role="search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" ng-model="filter.searchPhrase">
                            <span class="input-group-btn">
                                <a class="btn btn-default" type="button" href="#items"><i class="glyphicon glyphicon-search"></i></a>
                            </span>
                        </div><!-- /input-group -->
                        <button class="btn btn-link btn-sm" type="button" 
                             data-toggle="collapse" 
                             data-target="#collapseExample" 
                             aria-expanded="false" 
                             aria-controls="collapseExample"
                        >Show/Hide filter</button>
                    </form>
                    <p class="navbar-text">
                        <a href="#about">About <i class="glyphicon glyphicon-info-sign"></i></a>
                    </p>
                </div>

            </div><!--/.container-fluid -->

        </nav>

Upvotes: 0

Views: 176

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281874

Create the form in a div with nav navbar-nav classes. also for the About link use classes nav navbar-text navbar-right

<nav id="navbar" class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">
                            <!--img alt="Brand" src="images/logo-38-38.gif"-->App Name
                        </a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <div class="nav navbar-nav">
                    <form class="navbar-form" role="search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search" ng-model="filter.searchPhrase">
                                <span class="input-group-btn">
                                    <a class="btn btn-default" type="button" href="#items"><i class="glyphicon glyphicon-search"></i></a>
                                </span>
                            </div><!-- /input-group -->
                            <button class="btn btn-link btn-sm" type="button" 
                                 data-toggle="collapse" 
                                 data-target="#collapseExample" 
                                 aria-expanded="false" 
                                 aria-controls="collapseExample"
                            >Show/Hide filter</button>
                        </form>
                    </div>

                        <div class="nav navbar-text navbar-right">
                            <a href="#about">About <i class="glyphicon glyphicon-info-sign"></i></a>
                        </div>
                    </div>

                </div><!--/.container-fluid -->

            </nav>

FIDDLE

Upvotes: 1

Related Questions