How to change the width of a native bootstrap navbar?

Asked

Viewed 4,816 times

0

Good morning.

I need to change the width of a native navbar. I simply took the site boostrap.com and pasted it in my template.blade.php but it’s occupying the whole screen and I need to reduce its width. It’s like?

<nav class="navbar navbar-default">

laravel bootstrap laravel-blade nav-bar

1 answer

3


You can do the following:

.navbar.custom {
  width: 50%;  
  margin: 0 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default custom">

In his nav add the custom class, then in your css add:

.navbar.custom {
  width: 50%;  
  margin: 0 auto;
}

Change the value of width to find the ideal size!

  • Not changed. Did I do it correctly? In my NAV <Nav class="navbar navbar-default custom">

  • In my CSS / Menu / .navbar.custom { width: 50%; margin: 0 auto; }

  • Tá certinho, this css is being loaded on the page? tries to inspect the element nav to see if you’re relating well

Browser other questions tagged laravel bootstrap laravel-blade nav-bar

You are not signed in. Login or sign up in order to post.