|

How To Create A Bootstrap Panel Layout

How To Create A Bootstrap Panel Layout

In this tutorial we’ll take just a bit of time to focus on the bootstrap panel layout of this application. Panels in bootstrap are a nice way to create space and provide a visually pleasing layout. In version 4, we would probably use Bootstrap Cards which are also a nice layout element. For now however, we’ll deal with panel design ideas including making a better bootstrap panel layout and how to center a bootstrap panel. We’ll also look at moving the navigation elements to their own partial view vile and creating a link for logged in users to see their threads.


Making A Better Bootstrap Panel Layout

We have been using Bootstrap panels in this application and as you know a panel in bootstrap is just a bordered box with some padding around the content. On our main page, there is not much space in between panels – they just kind of all mesh together. We can fix that with the following markup which will provide a better visual effect.

index.blade.php

bootstrap panel layout


How To Center A Bootstrap Panel

Our main thread page is looking better now. How about we make the profile page look nice as well. What we will do is reduce the width of the panel on the profile page, and center it. To center the bootstrap panel, you can wrap it within a div and make use of the .offset class in Bootstrap.

show.blade.php

How To Center A Bootstrap Panel


Creating A Navigation Partial View

The layout view of app.blade.php is getting a little bloated. We can fix that by extracting the navigation elements to their own partial view file. We will update app.blade.php to make a simple call to @include(‘layout.nav’), the place all the navigation markup into that nav.blade.php file. Rest assured, everything works the same once this refactor is completed.
app.blade.php

nav.blade.php


Create A Profile Link For Logged In Users

We can now add a link to the right side of the navigation menu. Currently the application checks to see if the user is logged in, and if they are, a logout link is displayed. Let’s add another link for logged in users that will link directly to their profile so they can see all of their threads. Of course, this is quite easy. Find the code in nav.blade.php and edit where highlighted. Note we are able to link to a named route since we had set that up previously.

Create A Profile Link For Logged In Users


How To Create A Bootstrap Panel Layout Summary

with the tweaks we have made to our html markup in this tutorial, we have our bootstrap panels looking nice and slick. We now know how to properly space out panels in addition to getting them centered just right on the page.