CODEWITHSUNDEEP
htmltwitter-bootstrap
Bohn
Bohn

Reputation: 26919

Height of the first tab is different from other tabs

Just following by example to learn about Bootstrap, created this page so far, you can copy paste it to reproduce the issue. My question is what have I done wrong that caused the Home navigation link to be higher than the rest of the navigation links? enter image description here

Here is the whole page:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset = "UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>              

        <title>Welcome</title>
    </head>

    <body>
        <div class="container">
            <div class="jumbotron">
                <h1>Test Page Bootstrap 3</h1>
                <p>Watch this page grow as we learn more!</p>
                <a href="#" class="btn btn-primary btn-lg">More Detail <span class="glyphicon glyphicon-chevron-right"></span> </a> 

            </div>
        </div>

        <div class="container">
            <ul class="nav nav-tabs">
                <li class="active"> <a href="#">Home</li>
                <li> <a href="#">Menu 1</li>
                <li> <a href="#">Menu 2</li>
                <li> <a href="#">Menu 3</li>
            </ul>
        </div>
    <div class="container">
        <div class="row">

            <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
                <p> Paragraph1..erfjhjhfdjfhdgfd sfdghfsyfgdfd dsfsdf  dsfsdf 
                dsfdsfsdf ysdff7y er7yf73f ef ffs sf.</p> 
            </div>

            <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
                <p> Paragraph2...Oh dfifuhyf y fdf erf7yf7ds6 
                dfsdfy  efr98y  efr7y cuhf dfiuhf7 y efyef</p> 
            </div>

            <div class="clearfix visible-md"></div>


            <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
                <p> Paragraph3...yey efd dsfij 8777 e4r8ef8c7 3434 f87cersjdkh dffff erer  eee</p> 
            </div>

            <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
                <p> Paragraph4...Test paragrapg1  1233 eff long text lorum spoz</p> 
            </div>

            <div class="clearfix visible-lg"></div>

        </div>
    </div>
</body>

Upvotes: 1

Views: 65

Answers (1)

Massimiliano Peluso
Massimiliano Peluso

Reputation: 26727

you didn't correctly close the tag <a href="#">

The below should fix it:

       <div class="container">
            <ul class="nav nav-tabs">
                <li class="active"> <a href="#">Home</a></li>
                <li> <a href="#">Menu 1</a></li>
                <li> <a href="#">Menu 2</a></li>
                <li> <a href="#">Menu 3</a></li>
            </ul>
        </div>

Upvotes: 1

Related Questions