Integrating laravel with Bootstrap

The Bootstrap CSS framework has become very popular recently. This recipe will show how we
can use the framework with Laravel.

Getting ready

For this recipe, we need a standard Laravel installation. We’ll also need to have the assets
package installed, as demonstrated in the Adding assets recipe. Optionally, we could
download the Bootstrap files and save them locally.

How to do it…

To complete this recipe, follow these steps:
1. In the routes.php file, create a new route as follows:
Route::any(‘boot’, function()
{
Asset::add(‘jquery’, ‘http://ajax.googleapis.com/ajax
/libs/jquery/1.10.2/jquery.min.js’);
Asset::add(‘bootstrap-js’, ‘http://
netdna.bootstrapcdn.com/twitterbootstrap/
2.3.2/js/bootstrap.min.js’, ‘jquery’);
Asset::add(‘bootstrap-css’, ‘http://
netdna.bootstrapcdn.com/twitterbootstrap/
2.3.2/css/bootstrap-combined.min.css’);
$superheroes = array(‘Batman’, ‘Superman’, ‘Wolverine’,
‘Deadpool’, ‘Iron Man’);
return View::make(‘boot’)->with(‘superheroes’,
$superheroes);
});

2. In the views directory, create a file named boot.php add the following code to it:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>My Bootstrap Page</title>
<?= Asset::styles() ?>
</head>
<body>
<div class=”container”>
<h1>Using Bootstrap with Laravel</h1>
<ul class=”nav nav-tabs”>
<li class=”active”><a href=”#welcome” datatoggle=”
tab”>Welcome</a></li>
<li><a href=”#about” data-toggle=”tab”>
About Us</a></li>
<li><a href=”#contact” data-toggle=”tab”>
Contact</a></li>
</ul>
<div class=”tab-content”>
<div class=”tab-pane active” id=”welcome”>
<h4>Welcome to our site</h4>
<p>Here’s a list of Superheroes:</p>
<ul>
<?php foreach($superheroes as $hero): ?>
<li class=”badge badge-info”>
<?= $hero ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class=”tab-pane” id=”about”>
<h4>About Us</h4>
<p>Cras at dui eros. Ut imperdiet
pellentesque mi faucibus dapibus.

Phasellus vitae lacus at massa viverra
condimentum quis quis augue. Etiam
pharetra erat id sem pretium egestas.
Suspendisse mollis, dolor a sagittis
hendrerit, urna velit commodo dui, id
adipiscing magna magna ac ligula. Nunc
in ligula nunc.</p>
</div>
<div class=”tab-pane” id=”contact”>
<h3>Contact Form</h3>
<?= Form::open(‘boot’, ‘POST’) ?>
<?= Form::label(‘name’, ‘Your Name’) ?>
<?= Form::text(‘name’) ?>

<?= Form::label(’email’, ‘Your Email’) ?>
<?= Form::text(’email’) ?>
<br>
<?= Form::button(‘Send’, array(‘class’ =>
‘btn btn-primary’)) ?>
<?= Form::close() ?>
</div>
</div>
</div>
<?= Asset::scripts() ?>
</body>
</html>
3. In the browser, go to http://your-server/boot (where your-server is our
URL) and click through the tabs.

How it works…

For this recipe, we’ll be creating a single route and switch content using Bootstrap tabs. To get
our route to respond to any request, we use Route::any() and pass in our closure. To add
in the CSS and JavaScript, we could use a filter as with in the one in the Adding assets recipe;
however, for a single route, we’ll just include it in the closure. So we don’t have to download
them, we’ll just use the CDN versions of Bootstrap and jQuery.
Next in our route, we need some data. This would be a good place to tie in a database but, for
our purposes, we’ll use a simple array, with the names of some super heroes. We then pass
that array into our view.
We start the view with an HTML skeleton and include our styles in the head and the scripts
just before the closing </body> tag. At the top of the page, we use Bootstrap’s navigation
styles and data attributes to create our tab links. Then in our body, we use three different tab
panes, with IDs that correspond to the <a href> tag in our menu.
When we view the page, we’ll see the first pane showing and everything else hidden. By
clicking on the other tabs, we switch which tab pane is shown.

Leave a Reply

Your email address will not be published. Required fields are marked *