removing the borders of the navbar's button in Bootstrap 3 - html

Question

I'm creating a webpage and let's say I've got this navbar: (Courtesy TutorialsPoint)
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TutorialsPoint</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">iOS</li>
<li>SVN</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>jmeter</li>
<li>EJB</li>
<li>Jasper Report</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</nav>
This creates borders like this:
codepen.io/aravind-forever/pen/WGQXzL
I want to remove the borders from both the button and the nav. How do I do this? I've tried border: none but that does not work.
Merci d'avance!

Answer 1

Note sure why you're having difficulty...
.navbar.navbar-default, .navbar button.navbar-toggle { border: none; }
See it in a fiddle here: FIDDLE
.navbar.navbar-default, .navbar button.navbar-toggle { border: none; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div style="height: 40px;" title="just to move it down a little in snippet"></div>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TutorialsPoint</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">iOS</li>
<li>SVN</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>jmeter</li>
<li>EJB</li>
<li>Jasper Report</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</nav>

Answer 2

Lets keep it simple.
For nav, You can use:
.navbar-default{
border:0px;
}
For button, You can use:
.navbar-default .navbar-toggle{
border:0px;
}
Or just copy the code below to your CSS file:
.navbar-default, .navbar-default .navbar-toggle{
border:0px;
}
If nothing works, Try adding !important at the of 0px

Answer 3

you may call your style sheets in wrong order,
You can inline styling [ style="border: none;" ] for nav element and button element as beloved.
<nav class="navbar navbar-default" role="navigation" style="border: none;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse" style="border: none;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TutorialsPoint</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">iOS</li>
<li>SVN</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>jmeter</li>
<li>EJB</li>
<li>Jasper Report</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</nav>