Skip to content

Instantly share code, notes, and snippets.

@benallfree

benallfree/bootstrap-and-responsive-laravel.md

Last active August 3, 2016 06:42
Show Gist options
  • Save benallfree/9a228b8fae8178188c4b to your computer and use it in GitHub Desktop.
Save benallfree/9a228b8fae8178188c4b to your computer and use it in GitHub Desktop.
Download ZIP
Add Bootstrap theme & responsive support to Laravel
Raw
bootstrap-and-responsive-laravel.md

Add bootstrapper to composer.json and follow setup instructions and documentation

"require": {
    "patricktalmadge/bootstrapper": "dev-develop"
}

Add to app/config/app.php providers:

'Bootstrapper\BootstrapperServiceProvider',

Add to app/config/app.php aliases:

'Alert'          => 'Bootstrapper\\Alert',
'Accordion'      => 'Bootstrapper\\Accordion',
'Badge'          => 'Bootstrapper\\Badge',
'Breadcrumb'     => 'Bootstrapper\\Breadcrumb',
'Button'         => 'Bootstrapper\\Button',
'ButtonGroup'    => 'Bootstrapper\\ButtonGroup',
'ButtonToolbar'  => 'Bootstrapper\\ButtonToolbar',
'Carousel'       => 'Bootstrapper\\Carousel',
'DropdownButton' => 'Bootstrapper\\DropdownButton',
'Form'           => 'Bootstrapper\\Form',
'Helpers'        => 'Bootstrapper\\Helpers',
'Icon'           => 'Bootstrapper\\Icon',
'Image'          => 'Bootstrapper\\Image',
'Label'          => 'Bootstrapper\\Label',
'MediaObject'    => 'Bootstrapper\\MediaObject',
'Modal'          => 'Bootstrapper\\Modal',
'Navbar'         => 'Bootstrapper\\Navbar',
'Navigation'     => 'Bootstrapper\\Navigation',
'Paginator'      => 'Bootstrapper\\Paginator',
'Panel'          => 'Bootstrapper\\Panel',
'Progress'       => 'Bootstrapper\\Progress',
'Tabbable'       => 'Bootstrapper\\Tabbable',
'Table'          => 'Bootstrapper\\Table',
'Thumbnail'      => 'Bootstrapper\\Thumbnail',
'Typography'     => 'Bootstrapper\\Typography',

Create a app/views/layout.blade.php:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>PoolIt</title>

    <link rel="stylesheet" href="/css/style.css">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">
      <div class="header">
        <?php
        $links = array(
          array('Home', URL::to('')),
        );
        if(Auth::check())
        {
          $login = array(
            array('My account', URL::route('account-change-password') ),
            array('Log out', URL::route('account-sign-out')),
          );
          $links [] = array('My Fields', URL::to('fields'));
        } else {
          $login = array(
            array('Sign in', URL::route('account-sign-in')),
            array('Sign up', URL::route('account-create')),
            array('Forgot password?', URL::route('account-forgot-password') ),
          );
        }

        echo Navbar::create()
            ->with_brand('PoolIt', '/')
            ->with_menus(
              Navigation::links($links)
            )
            ->with_menus(
              Navigation::links($login),
              array('class' => 'pull-right')
            )          
        ?>
      </div>

      <div class="">
        @if(Session::has('message'))
          <p class="alert alert-warning">{{ Session::get('message') }}</p>
        @endif
        @if(Session::has('error'))
          <p class="alert alert-error">{{ Session::get('error') }}</p>
        @endif
      </div>

      @yield('content')

      <div class="footer">
        <p>&copy; PoolIt 2014</p>
      </div>

    </div> <!-- /container -->


    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    @yield('footer')
  </body>
</html>

Create app/views/home.blade.php:

@extends('layout')

@section('content')
  <div class="jumbotron">
    <h1>Jumbotron heading</h1>
    <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
  </div>

  <div class="row marketing">
    <div class="col-lg-6">
      <h4>Subheading</h4>
      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

      <h4>Subheading</h4>
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

      <h4>Subheading</h4>
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </div>

    <div class="col-lg-6">
      <h4>Subheading</h4>
      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

      <h4>Subheading</h4>
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

      <h4>Subheading</h4>
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </div>
  </div>

@stop
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment