Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap drop down with two anchor links per row not aligned

I am trying to make a dismissable notification dropdown with Twitter Bootstrap 3 and Font Awesome 4. I cannot get the links to align in one line and I have tried:

  1. enclosing them in a div
  2. the first link to have an <i> element inside it
  3. applying display:inline to the links
<ul class="dropdown-menu">
    <li>
    <a href="/demo" class="pull-left">your friend arrived </a> <a href="" class="pull-right fa fa-remove" on-click="deleteNotification()"></a>
    <a href="/demo" class="pull-left">small notification </a> <a href="" class="pull-right fa fa-remove" on-click="deleteNotification()"></a>
    <a href="/demo" class="pull-left">your friend arrived big notification</a> <a href="" class="pull-right fa fa-remove" on-click="deleteNotification()"></a>
    </li>
</ul>

you can see a full example here http://www.bootply.com/66SAUtHtnv

posted image is after applying also this css snippet:

.dropdown-menu>li>a {clear: none;}[![enter image description here][1]][1]
Tags:

2

Answers


  1. 0

    Give class="pull-left" for the <a> tags.

    <a href="/demo" class="pull-left">your friend arrived </a> <a href="" class="pull-right fa fa-remove" on-click="deleteNotification()"></a>
<a href="/demo" class="pull-left">small notification </a> <a href="" class="pull-right fa fa-remove" on-click="deleteNotification()"></a>
<a href="/demo" class="pull-left">your friend arrived big notification</a> <a href="" class="pull-right fa fa-remove" on-click="deleteNotification()"></a>

    It must be like pull-left and pull-right. And give this CSS:

    .dropdown-menu>li>a {clear: none;}

    Coz by default, bootstrap is clearing the <a> tags inside the dropdown.

    Login or Signup to reply.
  2. 0

    You can do this with CSS as I doubt any built in Bootstrap classes will be able to achieve this. Here are two example depending on how you ultimately want this to look.

    Both of these examples use an added class do the default isn’t altered and so the default dropdown can still be used across your application and all the add CSS can be found at the end under this comment: /* Added CSS for Notifications. */

    Example 1: This is the refined version as it creates space for the remove icon and always places it furthest to the right so all the icons are vertically aligned no matter how long the link text is.

    /* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */

#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}
/* Set the fixed height of the footer here */

#footer {
  height: 60px;
  background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */

/* Not required for template or sticky footer method. */

#wrap > .container {
  padding: 60px 15px 0;
}
.container .credit {
  margin: 20px 0;
}
#footer > .container {
  padding-left: 15px;
  padding-right: 15px;
}
code {
  font-size: 80%;
}
/* Added CSS for Notifications. */

.dropdown-remove li {
  width: 100%;
  margin-right: 20px;
}
.dropdown-remove li .remove:hover,
.dropdown-remove li .remove:focus {
  background: none;
  color: red;
}
.remove {
  margin-top: -26px;
  float: right;
  width: 10px;
  margin-right: 5px;
}
@media (max-width: 767px) {
  .dropdown-remove li {
    padding-right: 15px;
  }
  .remove {
    margin-top: -30px;
  }
}
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrap">
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#about">About</a>
          </li>
          <li><a href="#contact">Contact</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 dropdown-remove">
              <li><a href="/demo">your friend arrive</a>
                <a class="remove" href="/remove" on-click="deleteNotification()"><span class="fa fa-remove"></span></a>
              </li>
              <li><a href="/demo">small notification</a>
                <a class="remove" href="/remove" on-click="deleteNotification()"><span class="fa fa-remove"></span></a>
              </li>
              <li><a href="/demo">your friend arrived big notification</a>
                <a class="remove" href="/remove" on-click="deleteNotification()"><span class="fa fa-remove"></span></a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

    Example 2: This simply changes the display property so both a tags are on the same line.

    /* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */

#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}
/* Set the fixed height of the footer here */

#footer {
  height: 60px;
  background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */

/* Not required for template or sticky footer method. */

#wrap > .container {
  padding: 60px 15px 0;
}
.container .credit {
  margin: 20px 0;
}
#footer > .container {
  padding-left: 15px;
  padding-right: 15px;
}
code {
  font-size: 80%;
}
/* Added CSS for Notifications. */

.dropdown-remove li .remove:hover,
.dropdown-remove li .remove:focus {
  background: none;
  color: red;
}

.dropdown .dropdown-remove li a {
  display: table-cell;
}
    <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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="wrap">
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#about">About</a>
          </li>
          <li><a href="#contact">Contact</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 dropdown-remove">
              <li><a href="/demo">your friend arrive</a>
                <a class="remove" href="/remove" on-click="deleteNotification()"><span class="fa fa-remove"></span></a>
              </li>
              <li><a href="/demo">small notification</a>
                <a class="remove" href="/remove" on-click="deleteNotification()"><span class="fa fa-remove"></span></a>
              </li>
              <li><a href="/demo">your friend arrived big notification</a>
                <a class="remove" href="/remove" on-click="deleteNotification()"><span class="fa fa-remove"></span></a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search