how to change the dropdown menu by apply bootsrap. i show the dropdown menu below. i wan to change it to be more attractive https://imgur.com/a/W9EJjKH
If you look into the documentation of bootstrap and you should be able to setup a good looking dropdown menu. It depends on the version that you want to use
Bootstrap 3: https://getbootstrap.com/docs/3.4/components/#navbar
Bootstrap 4: https://getbootstrap.com/docs/4.3/components/navbar/
If you want any other styling you can override the bootstrap styling yourself with some extra padding and such.
@BOBBYBOUWMANN - i am using laravel 5.4, which one is better for me to use? 3 or 4?
@aishahyaacob Bootstrap 3. Only later versions come with Bootstrap 4.
@BOBBYBOUWMANN - what about npm? do i need to create a new project?
If you use the normal Laravel 5.4 project setup you already should have a package.json file which is used by npm. This is the default from Laravel 5.4: https://github.com/laravel/laravel/blob/5.4/package.json
Note that bootstrap 3 is already setup for Laravel 5.4 by default.
@BOBBYBOUWMANN - this is my json.file view https://imgur.com/a/Ezzj0tt
So you already have bootstrap 3.3.7
Just using the correct html format for the dropdown menu and it should work!
@BOBBYBOUWMANN - i try. thank you for your answers.
@aishahyaacob Did everything work out for you?
@HOSTINGPLANSCOMPARED - Also on hosting you need to set up laravel correctly, see my answers here: https://laracasts.com/discuss/channels/laravel/next-issue-fonts-and-images-arent-visible
And properly use the asset helpers.
If using something like Digital Ocean, they have in house tutorials.
@BOBBYBOUWMANN - not as i expected
@aishahyaacob What is not working as expected? I really need more information to help you further!
@BOBBYBOUWMANN - this is my full coding
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('dev.name', 'SMS') }}
</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">
<!-- Left Side Of Navbar -->
@if(Auth::user())
@if(Auth::user()->isAdmin() == "Admin")
<ul class="nav navbar-nav navbar-left ">
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
Question <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right " aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{route('question.index')}}">
List of Question
</a> <br/>
<a class="dropdown-item" href="{{route('question.create')}}">
Create Question
</a>
</div>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
Suggestion <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{route('suggestion.index')}}">
List of Suggestion
</a> <br/>
<a class="dropdown-item" href="{{route('suggestion.create')}}">
Create Suggestion
</a> <br/>
</div>
</li>
{{--<li class="nav-item">--}}
{{--<a class="nav-link" href="{{route('staff.admin.report')}}">Report</a>--}}
{{--</li>--}}
{{--untuk admin buat ap2 yg kluar terus--}}
</ul>
@elseif(Auth::user()->isStudent() == "student")
<ul class="nav navbar-nav navbar-left ">
<li class="nav-item">
<a class="nav-link" href="{{route('student.q_a.index')}}">Answering Questionnaire</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{route('student.q_a.score')}}">History of Score</a>
</li>
</ul>
@endif
@endif
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
And what exactly is not working for you?
@aishahyaacob Your syntax for the dropdown menu is incorrect. It should be this
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
Here is a working example with your code: https://www.bootply.com/0wC9FjDNHI#
Note: I only did the "Question" dropdown, but you can then see the difference between the two!
@BOBBYBOUWMANN - its working, thank you very much.
Please mark it solved
Please or to participate in this conversation.