Bootstrap 3 Dropdown menu is not working - html

I have a little problem with my dropdown menu. I can't get it to work. I've been searching for a few hours already and still nothing.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-center">
<li> <img src="img/wts-logo.png" style="width:40px; height:40px;" alt="World Travel Show" /> </li>
<li aria-haspopup="true" aria-expanded="false" class="dropdown" ><a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#page-top">WORLD TRAVEL SHOW</a><span class="caret"></span>
<ul class="dropdown-menu">
<li>O TARGACH</li>
<li>SALONY</li>
<li>DOJAZD</li>
<li>DLA MEDIÓW</li>
</ul>
</li>
<li> <a class="page-scroll" href="podroznicy.html">PODRÓŻNICY</a> </li>
<li> <a class="page-scroll" href="#adoba">ATRAKCJE</a> </li>
<li> <a class="page-scroll" href="#harmonogram">HARMONOGRAM</a> </li>
<li> <a class="page-scroll" href="#dojazd">DOJAZD</a> </li>
<li> <a class="page-scroll" href="#salony">SALONY</a> </li>
<li> <a class="page-scroll" href="#dla_wystawcow">O TARGACH</a> </li>
<li> <a class="page-scroll" href="#wystawcy">WYSTAWCY</a> </li>
<li> <a class="" href="http://targi.kadryturystyki.pl/" target="_blank">SZKOLENIA</a> </li>
<li> DLA MEDIÓW </li>
<li> <a class="page-scroll" href="#contact">KONTAKT</a> </li>
<li> <a class="page-scroll hidden-xs" href="#contact" id="logopwe" style="display:none;"><img src="img/pwe-logo.png" alt="Ptak Warsaw Expo" style="height:40px; width:40px;" /></a> </li>
</ul>
</div>
CodePen


The <span class="caret"></span> has to be inside the dropdown <a>...</a> tag.
Change
<a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#page-top">WORLD TRAVEL SHOW</a> <span class="caret"></span>
to
<a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#">WORLD TRAVEL SHOW <span class="caret"></span></a>
Bootply
http://www.bootply.com/wS18cO4pfA


Here is how I use Bootstrap dropdown, and it works fine:
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Button</button>
<ul class="dropdown-menu">
<div>Something</div>
</ul>
</div>
Good luck!

Related

Collapse menu in menuBar (Home section)

I have a problem creating the bootstrap collapse menu.
<div className='collapse' id='mobile-menu'>
<button
clasNames='navbar-toggler'
type='button'
data-toggle='collapse'
data-target='#navbarToggleExternalContent'
aria-controls='navbarToggleExternalContent'
aria-expanded='false'
aria-label='Toggle navigation'
>
<span className='navbar-toggler-icon'></span>
</button>
<div className={clsx('col-auto order-sm-1', styles.menu)} id='mobile-menu'>
<ul>
<li>
<a href='#' className={styles.active}>
Home
</a>
</li>
<li>
<a href='#'>Furniture</a>
</li>
<li>
<a href='#'>Chair</a>
</li>
<li>
<a href='#'>Table</a>
</li>
<li>
<a href='#'>Sofa</a>
</li>
<li>
<a href='#'>Bedroom</a>
</li>
<li>
<a href='#'>Blog</a>
</li>
</ul>
</div>
</div>
It should be hidden only for xs size. In button and user should be possible to open in and see all menu bar. I used bootstrap documents and I don't know how to do it correctly

You need to review the navbar docs for version 5 as the data attribute names have changed from data-* to data-bs-*. You are also targeting the wrong element data-target='#navbarToggleExternalContent' that should be data-bs-target="#mobile-menu". Also you have duplicate id='mobile-menu' elements (invalid HTML).
You want something more like the following:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm bg-light" id="mobile-menu-wrapper">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mobile-menu" aria-controls="mobile-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mobile-menu">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Furniture</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chair</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Table</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sofa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bedroom</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

Closing dropdown menu while opening another one in bootstrap

I have two dropdown menus residential and utility. When I click residential to open, it remains open but when I click utility, I want residential to close automatically.
Following is my code
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/121f02bcc5.js" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
<body>
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Rami Villa
</li>
<li>
Alpine Metals Jafza
</li>
<li>
Home 3
</li>
</ul>
</li>
<li class="active dropright">
<a href="#utilitySubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Utility
</a>
<ul class="collapse list-unstyled" id="utilitySubmenu">
<li>
Future Pipes
</li>
<li>
Future Scaffolding
</li>
<li>
Future Electricity
</li>
</ul>
</li>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
At the moment the output is like this.
Actually I want it like this.

To make a collapse effect use this jquery code. This code removes class show by method removeClass().
Also, wrap the topmost <li> tag in the <ul> tag. Otherwise, this html is not valid.
$(".dropdown-toggle").on("click", function () {
$(".collapse.show").removeClass("show");
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/121f02bcc5.js" crossorigin="anonymous"></script>
<body>
<ul>
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Rami Villa
</li>
<li>
Alpine Metals Jafza
</li>
<li>
Home 3
</li>
</ul>
</li>
<li class="active dropright">
<a href="#utilitySubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Utility
</a>
<ul class="collapse list-unstyled" id="utilitySubmenu">
<li>
Future Pipes
</li>
<li>
Future Scaffolding
</li>
<li>
Future Electricity
</li>
</ul>
</li>
</ul>
</body>

here is the code without jquery. it's only with bootstrap
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="homeSubmenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Residential
</a>
<div class="dropdown-menu" aria-labelledby="homeSubmenu">
<a class="dropdown-item" href="#">Rami Villa</a>
<a class="dropdown-item" href="#">Alpine Metals Jafza</a>
<a class="dropdown-item" href="#">Home 3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="utilitySubmenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Utility
</a>
<div class="dropdown-menu" aria-labelledby="utilitySubmenu">
<a class="dropdown-item" href="#">Future Pipes</a>
<a class="dropdown-item" href="#">Future Scaffolding</a>
<a class="dropdown-item" href="#">Future Electricity</a>
</div>
</li>
</ul>
</div>
</nav>

I have made some changes in your code, try this, hope this will work for you.
<div id="accordion">
<li class="active dropright">
<button class="btn btn-link" data-toggle="collapse" data-target="#homeSubmenu" aria-expanded="true" aria-controls="collapseOne">
residential
</button>
<ul class="collapse list-unstyled" id="homeSubmenu" data-parent="#accordion">
<li>
Rami Villa
</li>
<li>
Alpine Metals Jafza
</li>
<li>
Home 3
</li>
</ul>
</li>
<li class="active dropright">
<button class="btn btn-link" data-toggle="collapse" data-target="#utilitySubmenu" aria-expanded="true" aria-controls="collapseOne">
Utility
</button>
<ul class="collapse list-unstyled" id="utilitySubmenu" data-parent="#accordion">
<li>
Future Pipes
</li>
<li>
Future Scaffolding
</li>
<li>
Future Electricity
</li>
</ul>
</li>
</div>

I write a code hope it works for you:
$('.dropdowns').on('show.bs.dropdown', function () {
var currentDropdown = $(this);
$('.dropdowns').each(function () {
if($(this) !== currentDropdown && $(this).hasClass('open')) {
$(this).dropdown('toggle')
}
})
})

You can use .not() method to exclude the dropdown-toggle which clicked and then using same remove class and add attr to elements .
Demo Code :
//onclick of dropdown
$(".dropdown-toggle").on("click", function() {
//change attr of other..
$(".dropdown-toggle").not(this).attr("aria-expanded", "false")
//addclass of other..
$(".dropdown-toggle").not(this).addClass("collapsed")
//remove show class from others
$(".list-unstyled").not($(this).next("ul")).removeClass("show")
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/121f02bcc5.js"></script>
<ul>
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i> Residential
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Rami Villa
</li>
<li>
Alpine Metals Jafza
</li>
<li>
Home 3
</li>
</ul>
</li>
<li class="active dropright">
<a href="#utilitySubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i> Utility
</a>
<ul class="collapse list-unstyled" id="utilitySubmenu">
<li>
Future Pipes
</li>
<li>
Future Scaffolding
</li>
<li>
Future Electricity
</li>
</ul>
</li>
<li class="active dropright">
<a href="#utilitySubmenu2" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i> Utilit4y
</a>
<ul class="collapse list-unstyled" id="utilitySubmenu2">
<li>
Future Pipes2
</li>
<li>
Future Scaffo2lding
</li>
<li>
Future Electri2city
</li>
</ul>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

Bootstrap navbar dropdown list not working properly

I'm having a problem with the dropdown list in the navigation bar. It was working properly last night but i don't know what happened the bootstrap stopped working only for the dropdown list. Please help me out of this.Bootstrap file link is working properly because its working for the whole page but not working for navbar dropdowns only.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand name-style" href="#"><span style="color: #4dc47d;">Abasyn Univeristy Islamabad Campus</span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Home
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Home </li>
<li> About</li>
<li> History </li>
<li> Vision & Mission </li>
<li> Objectives </li>
<li> Messages </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Programs
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Undergraduate </li>
<li> Graduate </li>
<li> Departments</li>
<li> Rules and Policies </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Admission
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Admission Overview </li>
<li> Financial Aid </li>
<li> Scholarships </li>
<li> Fee Structure </li>
<li> Admission Procedure </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Faculty
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Department of Electrical Engineering </li>
<li> Department of Computing & Technology </li>
<li> Department of Civil Engineering </li>
<li> Department of Management Science </li>
<li> Department of Life Science </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Research
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Projects </li>
<li> Publications </li>
<li> Abasyn Intl. Conference </li>
<li> Journal of Social Sciences </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Students
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Activities & Clubs </li>
<li> Student Handbook</li>
<li> Community Services</li>
<li> Student Schedules </li>
<li> Digital Library </li>
<li> Learning Management System </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Center of M & E
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About the Center</li>
<li>OBE at AUIC</li>
<li>Software System - TLS</li>
<li> Research and Analysis</li>
</ul>
</li>
</div>
</div>
This is the output

Check the css and js you have used. If you add these Cdn will solve your problem
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand name-style" href="#"><span style="color: #4dc47d;">Abasyn Univeristy Islamabad Campus</span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Home
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Home </li>
<li> About</li>
<li> History </li>
<li> Vision & Mission </li>
<li> Objectives </li>
<li> Messages </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Programs
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Undergraduate </li>
<li> Graduate </li>
<li> Departments</li>
<li> Rules and Policies </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Admission
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Admission Overview </li>
<li> Financial Aid </li>
<li> Scholarships </li>
<li> Fee Structure </li>
<li> Admission Procedure </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Faculty
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Department of Electrical Engineering </li>
<li> Department of Computing & Technology </li>
<li> Department of Civil Engineering </li>
<li> Department of Management Science </li>
<li> Department of Life Science </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Research
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Projects </li>
<li> Publications </li>
<li> Abasyn Intl. Conference </li>
<li> Journal of Social Sciences </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Students
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Activities & Clubs </li>
<li> Student Handbook</li>
<li> Community Services</li>
<li> Student Schedules </li>
<li> Digital Library </li>
<li> Learning Management System </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Center of M & E
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About the Center</li>
<li>OBE at AUIC</li>
<li>Software System - TLS</li>
<li> Research and Analysis</li>
</ul>
</li>
</div>

<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand name-style" href="#"><span style="color: #4dc47d;">Abasyn Univeristy Islamabad Campus</span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Home
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Home </li>
<li> About</li>
<li> History </li>
<li> Vision & Mission </li>
<li> Objectives </li>
<li> Messages </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Programs
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Undergraduate </li>
<li> Graduate </li>
<li> Departments</li>
<li> Rules and Policies </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Admission
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Admission Overview </li>
<li> Financial Aid </li>
<li> Scholarships </li>
<li> Fee Structure </li>
<li> Admission Procedure </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Faculty
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Department of Electrical Engineering </li>
<li> Department of Computing & Technology </li>
<li> Department of Civil Engineering </li>
<li> Department of Management Science </li>
<li> Department of Life Science </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Research
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Projects </li>
<li> Publications </li>
<li> Abasyn Intl. Conference </li>
<li> Journal of Social Sciences </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Students
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Activities & Clubs </li>
<li> Student Handbook</li>
<li> Community Services</li>
<li> Student Schedules </li>
<li> Digital Library </li>
<li> Learning Management System </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Center of M & E
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About the Center</li>
<li>OBE at AUIC</li>
<li>Software System - TLS</li>
<li> Research and Analysis</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

I need help in formatting the navbar menu of bootstrap

my navbar
Hi, this is the code that i have used
<div class="container">
<nav class="navbar navbar-default" id="my-navbar">
<div class="container" style="margin-left:60px; margin-right:60px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="">
<div class="nav navbar-nav navbar-left" style="margin-top:15px;">
<img src="images/logostack.gif" alt="logo">
</div>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center menu_style" > <!--style="font-size:18px; margin-top:25px;"-->
<!-- LI STANDS FOR LIST-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About Something</li>
<li>Meet the Experts</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Shortcomings</li>
<li>Complications</li>
<li>Stakeholders</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Statistics </li>
<li>Profile Patient</li>
<li>Burden Economical</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Management Approach</li>
<li>Algorithms & Protocols</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Non Critical</li>
<li>Critical</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Modules</li>
<li>Videos </li>
<li>Images </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Post your Query</li>
<li>Experts Council</li>
</ul>
</li>
</ul>
<!--unordered list -->
</div>
</div>
I want to place the menu below the logo without using margin on the ul list (since that will spoil the mobile responsiveness and collapse property of bootstrap) .. instead i want to do it with using row and column functions of bootstrap but since im new to it im not able to make it.. any sort of help really appreciated.. thanks in advance..

I've searched and maybe this will help.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
Link to article:
Center content in responsive bootstrap navbar

You can still use the margin property to achieve this, however if you want to eliminate the changed margin for collapsed menu bar, you can use CSS Media queries to change the margin back to zero. Ofcourse, there will be a certain screen size, where the navbar changes to collapsable navbar so you will need Media Queries.
#media only screen and (max-width:--px)
{
//your nav-bar code goes here
}

You have to take a row top of the navbar.
<div class="container">
<img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
<nav class="navbar navbar-default col-md-10" id="my-navbar">
// Your navbar code
</nav>
</div>
Full code according to your question:
<div class="container">
<img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
<nav class="navbar navbar-default col-md-10" id="my-navbar">
<div class="container" style="margin-left:60px; margin-right:60px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center menu_style" >
<!--style="font-size:18px; margin-top:25px;"-->
<!-- LI STANDS FOR LIST-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
About Something
</li>
<li>
Meet the Experts
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Shortcomings
</li>
<li>
Complications
</li>
<li>
Stakeholders
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Statistics
</li>
<li>
Profile Patient
</li>
<li>
Burden Economical
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Management Approach
</li>
<li>
Algorithms & Protocols
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Non Critical
</li>
<li>
Critical
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Modules
</li>
<li>
Videos
</li>
<li>
Images
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Post your Query
</li>
<li>
Experts Council
</li>
</ul>
</li>
</ul>
<!--unordered list -->
</div>
</div>
</nav>
</div>
You have to know about Bootstrap Grid.

how to remove horizontal scroll bar in mobile view?

In bootstrap3 I am trying to remove horizontal scroll bar in mobile it looks fine in desktop view but in mobile view the horizontal bar is shown I read that horizontal bar comes due to container-fluid so to I used tag but it is not work
here is the code
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RG ACADEMY</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>About Academy</li>
<li>Faculty Team</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS+ADVANCED</li>
<li>JEE MAINS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Results <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE 2015</li>
<li>JEE MAINS 2015</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Exams Info <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS + ADVANCED</li>
<li>BITSAT</li>
<li>KVPY</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Downloads<span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE Solutions</li>
<li>JEE MAINS</li>
<li>KVPY</li>
</ul>
</li>
<li>Enquiry</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyhicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>

You can use:
overflow:hidden;
in css or declarate it deirect in the html:
<style type="text/css">
.container-fluid {
overflow-x:hidden;
overflow-y:hidden;
overflow:hidden;
}
</style>
I hope it helps

Everything looks fine to me. You probably have some custom CSS doing something wrong. I even tried excluding "viewport" meta tag, still doesn't show overflow.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RG ACADEMY</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>About Academy</li>
<li>Faculty Team</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS+ADVANCED</li>
<li>JEE MAINS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Results <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE 2015</li>
<li>JEE MAINS 2015</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Exams Info <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS + ADVANCED</li>
<li>BITSAT</li>
<li>KVPY</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Downloads<span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE Solutions</li>
<li>JEE MAINS</li>
<li>KVPY</li>
</ul>
</li>
<li>Enquiry</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyhicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</body>
</html>