CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Greg
Greg

Reputation: 1710

how to add a 2 links on 1 line using a li element inside sidebar using bootstrap dashboard

So i'm using this example as guideline http://getbootstrap.com/examples/dashboard/ But now i want to modify the sidebar so i could get 2 links in one line. i tryed something like this :

I'm using AngularJS to show what <li> is active 

<li ng-class="{ active: isActive('/content1')}" > 
    <a href="#/content1">Content1  </a> <a class="btn btn-primary" href="#/content1/addsomestuff">+</a>
</li>

But this does display on 2 lines in the sidebar instead of 1.

Is it also possible to give the first part on 80% of the space and the second part 20% of the place inside the sidebar? this is how i think it should look inside the <li> element

enter image description here

Upvotes: 0

Views: 383

Answers (1)

Xahed Kamal
Xahed Kamal

Reputation: 2223

You can apply the below CSS to achieve that -

li a{
        float:left;
        display: block;
    }

    li a:first-child{
        width: 79%;
    }

    li a:last-child{
        width: 19%;
        margin-left: 2%;
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<li class="clearfix" ng-class="{ active: isActive('/content1')}" > <a href="#/content1" class="btn btn-warning">Content1  </a> <a class="btn btn-primary" href="#/content1/addsomestuff">+</a>  </li>

I used btn-warning class to show you that its both element taking the width as you are trying to get. Instead of applying css on li a give the li a class and apply the css. Also use bootstrap clearfix class in that li as both a are float element

Upvotes: 1

Related Questions