Twitter Bootstrap Question posted in

Navbar not displaying correctly-Twitter bootstrap

I have the code below:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <header class="navbar navbar-expand navbar-light flex-column flex-md-row bg-faded rounded">
      <a class="navbar-brand mr-0 mr-md-2" href="/"><i class="fa fa-btc fa-2x" aria-hidden="true"></i></a>

      <div class="navbar-nav-scroll">
        <ul class="navbar-nav bd-navbar-nav flex-row mt-1">
          <li class="nav-item active">
            <a class="nav-link" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/profile">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/conditions">Conditions</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/feedback">Feedback</a>
          </li>
        </ul>
      </div>
      <a class="btn btn-default mb-3 mb-md-0 ml-md-3" href="http://twitter.com/btclottery2018" aria-label="Twitter">
        <i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
      </a>
    </header>
  </div>
</body>

My links are stuck together, but they must be the distance and the Twitter icon should be in the right corner. What is my mistake? What did I do wrong?

Tags:

4

Answers


  1. 0

    You can try this in your custom css

    .navbar-nav .nav-link{
padding-right:10px;
}
    Login or Signup to reply.
  2. 0

    Add this style in your style sheet.

    .nav-item{
    margin-right:7px;
}
    Login or Signup to reply.
  3. 0

    As per your code, you have included the bootstrap css, but the design need some more css for width, positioning and spacing of the elements.

    Try to do it this way. Add the extra CSS.

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <header class="navbar navbar-expand navbar-light flex-column flex-md-row bg-faded rounded">
      <a class="navbar-brand mr-0 mr-md-2" href="/"><i class="fa fa-btc fa-2x" aria-hidden="true"></i></a>

      <div class="navbar-nav-scroll">
        <ul class="navbar-nav bd-navbar-nav flex-row mt-1">
          <li class="nav-item active">
            <a class="nav-link" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/profile">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/conditions">Conditions</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/feedback">Feedback</a>
          </li>
        </ul>
      </div>
      <a class="btn btn-default mb-3 mb-md-0 ml-md-3" href="http://twitter.com/btclottery2018" aria-label="Twitter">
        <i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
      </a>
    </header>
  </div>
</body>

    Extra CSS Part :-

    .navbar-brand {
  float:left;
  width:10%;
}

header .navbar-nav-scroll {
  float: left;
  width:80%;
}

header .navbar-nav {
    display: inline-block;
    vertical-align: middle;
    margin-top: 25px;   
}

.navbar-nav li {
  float:left;
  padding:0px 20px;
  list-style:none;
}

.navbar-nav>li a {
  padding: 15px 20px;
  color:#000000;
  text-decoration:none;
}

.twitter-icon {
  float: right;
  margin-top: 25px;
  width:10%;
}
    Login or Signup to reply.
  4. 0

    You need to do three things here:

    1. You need to move the brand logo and the twitter icon inside individual li in the ul of navbar, for all of them to come in the same line.
    2. You need to give the li containing the twitter icon a class of “navbar-right” so that it moves to the right.

    3. You need to give a padding to the class “nav-items”, something like this:

      .nav-items{
      padding:10px
      }

    I’m attaching a JSFiddle for your reference. I hope this solves your problem.

    https://jsfiddle.net/dk4v76rw/

      <div class="navbar-nav-scroll">
    <ul class="nav navbar-nav bd-navbar-nav flex-row mt-1">

     <!--Add the navbar-brand in the ul-->
      <li> 
        <a class="navbar-brand mr-0 mr-md-2" href="/"><i class="fa fa-btc fa-2x" aria-hidden="true"></i></a>
      </li>

      <li class="nav-item active">
        <a class="nav-link" href="/">Home</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="/profile">Profile</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="/conditions">Conditions</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="/feedback">Feedback</a>
      </li>

      <!--Add the icon as an li in the ul of the navbar and give it a class navbar-right-->
      <li class="navbar-right">
        <a class="btn btn-default mb-3 mb-md-0 ml-md-3 right" href="http://twitter.com/btclottery2018" aria-label="Twitter">
         <i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
         </a>
     </li>

    </ul>   
 </div>


</header>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search