0

I want to customize the navbar to be equal size as the container below:

<div class="container jumbotron row col-sm-12" style="width: 100%; margin: 0px auto;">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

I've tried like everything, changed every div and none of this works, so I am wondering what am I doing wrong.

Picture to precise what I mean: enter image description here

2
  • 1
    Use chrome, right click, inspect element, look at Inspector + Rules or Computed - find width, see what's setting it. Do the same for the main content area (you may need to select the parent element(s)) Commented Jul 27, 2015 at 12:35
  • Ok, I got it, just deleted the container and it works ;) Commented Jul 27, 2015 at 12:44

2 Answers 2

1

You can wrap your code in a div with the container class:

Bootply Link

<div class="container">
    <div class="container jumbotron row col-sm-12" style="width: 100%; margin: 0px auto;">
      <h1>ASP.NET</h1>
      <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
      <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p>
  </div>
</div>
Sign up to request clarification or add additional context in comments.

Comments

0

You can just rearrange your containers, you don't really need the one with the Jumbotron.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <nav class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Brand</a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>

        </li>
        <li><a href="#">Link</a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Action</a>

            </li>
            <li><a href="#">Another action</a>

            </li>
            <li><a href="#">Something else here</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a>

            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Action</a>

            </li>
            <li><a href="#">Another action</a>

            </li>
            <li><a href="#">Something else here</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </nav>
  <div class="jumbotron row col-sm-12" style="width: 100%; margin: 0px auto;">
    <h1>ASP.NET</h1>

    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a>

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.