Bootstrap Layout Navbar and Menu - css

Question

I am using Bootstrap v3 for a layout and have added a dropdown to the navbar but when I add btn-primary the text is black so cannot be seen, if I remove the btn-primary then the corner radius seems to overlap the menu.
Any help is appreciated.
<div class="container">
<div class="col-md-12 column">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="Javascript:void(0);">Title Information </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown btn-primary">
<a class="dropdown-toggle btn-primary" href="Javascript:void(0);" data-toggle="dropdown">Actions<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
Action 1
</li>
<li>
Action 2
</li>
<li>
Action 3
</li>
<li class="divider"></li>
<li>
Close
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div role="tabpanel" class="col-md-12 column">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
</div>
</div>
</div>
some images:
https://www.dropbox.com/s/fuirgtcfc0obl04/Image1.JPG?dl=0
https://www.dropbox.com/s/en0vooc1z99hbkh/Image2.JPG?dl=0

Answer 1

Take out the "btn-primary" but change it to "btn" only, that should fix it.

Answer 2

Remove both btn-primary classes, as these aren't required.
You also have </div> and </nav> closing in the wrong order, and two extra </div> at the bottom of your code.
With the btn-primary removed, and the above fixed, then you get the following:
https://jsfiddle.net/9jym0k8r/

Answer 3

You can customize the style of bootstrap button.
I just added this to change the color of text :
.navbar-default .navbar-nav>li>a {
color: #FFF;
}
Link Demo : http://www.bootply.com/Ukp9KCUuFP
You can also give an "unique id" then customize the style for this button.
<a id="test" class="dropdown-toggle btn-primary" href="Javascript:void(0);" data-toggle="dropdown">Actions<strong class="caret"></strong></a>
css:
#test {
color:white;
}
#test:hover{
color:black;
}
Link : http://www.bootply.com/XWF4x6uhmz