title: bootstrap, white line under navigation menu, active link
body: <p>I have this: _Layout.cshtml</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;@ViewBag.Title - LolaBikeMen&lt;/title&gt;
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
  
  
  
                  @Html.ActionLink("LolaBikeMen", "Index", "Home", null, new { @class = "navbar-brand" })
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse"&gt;
                  &lt;br /&gt;
                  &lt;div class="float-right"&gt;
                      @*&lt;section id="login"&gt;
                          @Html.Partial("_LoginPartial")
                      &lt;/section&gt;*@
  
                      &lt;ul class="nav navbar-nav"&gt;
                          @*&lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;*@
                          &lt;li @if (@ViewContext.RouteData.GetRequiredString("controller") == "Account") { @Html.AttributeEncode("class=active")  ; }&gt;
                              @Html.ActionLink("WHO", "Index", "Account")
                          &lt;/li&gt;
                          &lt;li class="{active:isActive}"&gt;@Html.ActionLink("WHAT", "Index", "Student")&lt;/li&gt;
                          &lt;li class="nav"&gt;@Html.ActionLink("AGENDA", "Index", "Course")&lt;/li&gt;
                          &lt;li class="nav"&gt;@Html.ActionLink("PHILOSPY", "Index", "Instructor")&lt;/li&gt;
                          &lt;li class="nav"&gt;@Html.ActionLink("BUCKET-LIST", "Index", "Department")&lt;/li&gt;
                          &lt;li class="nav"&gt;@Html.ActionLink("LolaRiders", "Index", "LolaBiker")&lt;/li&gt;
                          &lt;li class="nav"&gt;@Html.ActionLink("bycicle", "Index", "Bycicle")&lt;/li&gt;
  
                          &lt;li class="nav"&gt; @Html.Partial("_LoginPartial")&lt;/li&gt;
  
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container body-content"&gt;
          @RenderBody()
          &lt;hr /&gt;
          &lt;footer&gt;
              &lt;p&gt;&amp;copy; @DateTime.Now.Year - LolaBikeMen&lt;/p&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and this is my site.css:</p>
  
  <pre><code>/* Move down content because we have a fixed navbar that is 50px tall */
  .container{
      /*background-color:MenuText;*/
  }
  .container2{
  
      width:100%;
      height:100%;
  }
  
  label
  {
      color:white;
  
  }
  
  .add-on .input-group-btn &gt; .btn {
    border-left-width:0;left:-2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  }
  /* stop the glowing blue shadow */
  .add-on .form-control:focus {
   box-shadow:none;
   -webkit-box-shadow:none; 
   border-color:#cccccc; 
  }
  
  body {
  
      margin-top:90px;
  
  
      /*padding-top: 90px;
      padding-bottom: 20px;*/
  
  }
  
  /*html {
              background: url(~/Images/Large.JPG) no-repeat center center fixed;
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;
          }*/
  
  .wrapper {
    background-image: url(../Images/Large.JPG);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
  
  }
  .wide {
    width:100%;
    height:1000px;
    background-image:url('../Images/Large.JPG');
    background-size:cover;
  }
  
  .wide img {
    width:100%;
  }
  
  navbar{
      color:white;
  }
  
  .table-striped&gt;tr&gt;td:nth-child(odd)&gt;td, 
  .table-striped&gt;tr&gt;td:nth-child(odd)&gt;td {
      background-color:white;
  }
  
  .table.table-condensed tr th {
     border-top: 1px solid white; 
  }
  
  .table.table-condensed tr th {
     border-bottom: 1px solid white; 
  }
  
  .a:hover, a:focus {
          color:floralwhite;
          text-decoration: underline;
      }
  
  a {
      color:floralwhite;
      text-decoration: none;
  }
  
  .table.table-condensed tr td {
     border-bottom: 1px solid white; /* Change the color you want to set */
  }
  
  .wrapper {
      width: 100%;
      background-color: lightcyan;
  }
  
  img {
      background-image: url('../Images/Large.JPG');
      background-repeat: no-repeat;
      background-position:top;
      background-size:cover;
      width: 100%;
      height: 100%;
  }
  
  /**/
  #map {
          height: 100%;
          width: 100%;
  }
  
  #map img {
          max-width: 100%;
  }
  
  html, body {
          height: 100%;
          width: 100%;
  }
  
  .hallo{
       background-image: url('../Images/Large.JPG');
  
  
  }
  
  .fullscreen,
  .content-a {
      width:100%;
      min-height:100%;
  }
  
  
  .background {
      background-image: url('../Images/Large.JPG');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: 100%;
  
  }
  
  .fill {
      top: -10px;
      left: 0;
      right: 0;
      bottom: 0;
      position:relative;
      /*overflow-x;*/
      width:100%;
      height:100%;
  }
  
  html,body{height:100%;}
  .carousel,.item,.active{height:100%;}
  .carousel-inner{height:100%;}
  .fill{width:100%;height:100%;background-position:center;background-size:cover;}
  
  .navbar {
          margin-bottom: 0;
  }
  
  /* Demo */
  #map { background:black; }
  
  
  
  
  /**/
  
  /* Wrapping element 
  /* Set some basic padding to keep content from hitting the edges */
  .body-content {
      padding-left: 15px;
      padding-right: 15px;
  
  
  }
  
  /* Override the default bootstrap behavior where horizontal description lists 
     will truncate terms that are too long to fit in the left column 
  */
  .dl-horizontal dt {
      white-space: normal;
  }
  
  /* Set widths on the form inputs since otherwise they're 100% wide */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="select"] {
      max-width: 280px;
  }
  
  /* Responsive: Portrait tablets and up */
  @media screen and (min-width: 768px) {
      .jumbotron {
          margin-top: 20px;
      }
      .body-content {
          padding: 0;
  
      }
  }
  </code></pre>
  
  <p>How to make a white line under the active link in the menu bar? I triied with Active:IsActive, but how to make the white line under the active link.</p>
  
  <p>Thank you</p>
  
  <p>I have it now like this:</p>
  
  <pre><code> &lt;ul class="nav navbar-nav"&gt;
  
                          &lt;li class=" nav active"&gt;@Html.ActionLink("WHO", "Index", "Account")&lt;/li&gt;
                          &lt;li class=" nav active"&gt;@Html.ActionLink("WHAT", "Index", "Student")&lt;/li&gt;
                          &lt;li class=" nav active"&gt;@Html.ActionLink("AGENDA", "Index", "Course")&lt;/li&gt;
                          &lt;li class=" nav active"&gt;@Html.ActionLink("PHILOSPY", "Index", "Instructor")&lt;/li&gt;
                          &lt;li class="nav active"&gt;@Html.ActionLink("BUCKET-LIST", "Index", "Department")&lt;/li&gt;
                          &lt;li class="nav active"&gt;@Html.ActionLink("LolaRiders", "Index", "LolaBiker")&lt;/li&gt;
                          &lt;li class="nav active"&gt;@Html.ActionLink("bycicle", "Index", "Bycicle")&lt;/li&gt;
  
                          &lt;li class="nav"&gt; @Html.Partial("_LoginPartial")&lt;/li&gt;
  
                      &lt;/ul&gt;
  </code></pre>
  
  <p>and this for site:</p>
  
  <pre><code>.active {
              font-style:oblique ;
               border-bottom:1px solid white;
  
          }
  </code></pre>
  
  <p>But now all the items have a white stripe, and not onely the active link.</p>
  
  <p>If I use this:</p>
  
  <pre><code>li.active &gt; a {
      border-bottom:1px solid red;
  }
  </code></pre>
  
  <p>then also all the items have red line</p>
  
  <p>and if I just do this:</p>
  
  <pre><code>  &lt;ul class="nav navbar-nav"&gt;
  
                          &lt;li @if (@ViewContext.RouteData.GetRequiredString("controller") == "Account") { @Html.AttributeEncode("class=active")   ; }&gt;
                              @Html.ActionLink("WHO", "Index", "Account")
                          &lt;/li&gt;
  
                          &lt;li @if (@ViewContext.RouteData.GetRequiredString("controller") == "Student") { @Html.AttributeEncode("class=active")    ; }&gt;
                              @Html.ActionLink("What", "Index", "Student")
                          &lt;/li&gt;
  
  
                          &lt;li class="nav"&gt; @Html.Partial("_LoginPartial")&lt;/li&gt;
  
                      &lt;/ul&gt;
  </code></pre>
  
  <p>still both items are highlighted</p>