CODEWITHSUNDEEP
csstwitter-bootstrap-3
user3189734
user3189734

Reputation: 665

Left Align button in bootstrap 3

I am having an issue trying to get my button to left align with the a href. I'm using bootstrap 3.

Can anyone assist?

<ul class="nav nav-list"> 
    <li class="nav-header">Type</li> 
    <li class="active"> 
    <button type="button" class="remove-filter" data-url="https://www.url.com">×</button>
        <a href="https://www.url.com/type:bananas"> Bananas </a> 
    </li> 
<ul>

Upvotes: 0

Views: 572

Answers (2)

Nguyen Tuan Anh
Nguyen Tuan Anh

Reputation: 1036

You may need to add "display: inline" style to your a tag. Here is a working example.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-list">
  <li class="nav-header">Type</li>
  <li class="active">
    <button type="button" class="remove-filter" data-url="https://www.url.com">×</button>
    <a href="https://www.url.com/type:bananas" style="display: inline;"> Bananas </a> 
  </li>
  <ul>

Upvotes: 3

Satej S
Satej S

Reputation: 2156

You can simply add the pull-left class to your button.

<button type="button" class="remove-filter pull-left" data-url="https://www.url.com">×</button>

You can find the snippet below

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<ul class="nav nav-list"> 
    <li class="nav-header">Type</li> 
    <li class="active"> 
    <button type="button" class="remove-filter pull-left" data-url="https://www.url.com">×</button>
        <a href="https://www.url.com/type:bananas"> Bananas </a> 
    </li> 
<ul>

Upvotes: 1

Related Questions