• Skip to main content
  • Skip to primary sidebar

Technical Notes Of
Ehi Kioya

Technical Notes Of Ehi Kioya

  • Forums
  • About
  • Contact
MENUMENU
  • Blog Home
  • AWS, Azure, Cloud
  • Backend (Server-Side)
  • Frontend (Client-Side)
  • SharePoint
  • Tools & Resources
    • CM/IN Ruler
    • URL Decoder
    • Text Hasher
    • Word Count
    • IP Lookup
  • Linux & Servers
  • Zero Code Tech
  • WordPress
  • Musings
  • More
    Categories
    • Cloud
    • Server-Side
    • Front-End
    • SharePoint
    • Tools
    • Linux
    • Zero Code
    • WordPress
    • Musings

How To Use A Custom Bootstrap Template With Laravel

Tagged: Bootstrap, Laravel

  • This topic has 0 replies, 1 voice, and was last updated 1 year, 1 month ago by Chinomnso.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • January 15, 2020 at 5:39 am #83990
    Participant
    @chinomnso

    Laravel + Bootstrap

    Visual appeal is a very important factor to consider when developing a website. For me, Laravel’s default styling is not just enough. There are many very beautiful Bootstrap templates available, both free and paid, and they can go a long way in spicing up your website’s aesthetics. This article explains how to use Bootstrap in your Laravel project.

    Using A CDN To Serve Bootstrap Resources

    The easiest way to use Bootstrap with Laravel is to serve Bootstrap resources from a CDN. Head over to Bootstrap’s official website and copy the links to the resources. At the time of writing, the latest stable version of Bootstrap is version 4.4.1. The following are the resources we need to work with Bootstrap. I took out some unnecessary HTML attributes, but my code works just fine without them.

    CSS:

    1
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>

    JS:

    1
    2
    3
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    Read up this article on Blade partials in Laravel to learn how to separate page elements into different files. After reading this article, you will be able to apply what you’ve learned from both articles to make Bootstrap’s resources available to all pages on your website. For this article though, we will work with just one page – Laravel’s default home page. Open resurces/views/welcome.blade.php and edit it to look like this:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    <!DOCTYPE html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
     
        <title>Laravel</title>
        <!--styles-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
        <!--style-->
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet"/>
     
    </head>
     
    <body>
        <div class="pos-f-t">
            <div class="collapse" id="navbarToggleExternalContent">
                <div class="bg-dark p-4">
                    <h5 class="text-white h4">Collapsed content</h5>
                    <span class="text-muted">Toggleable via the navbar brand.</span>
                </div>
            </div>
            <nav class="navbar navbar-dark bg-dark">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </nav>
        </div>
        <div class="content">
            <br /><br />
     
            <div class="links">
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-secondary">Secondary</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-danger">Danger</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-light">Light</button>
                <button type="button" class="btn btn-dark">Dark</button>
     
                <button type="button" class="btn btn-link">Link</button>
     
     
                <!-- Example single danger button -->
                <div class="btn-group">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Action
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#" rel="nofollow">Action</a>
                        <a class="dropdown-item" href="#" rel="nofollow">Another action</a>
                        <a class="dropdown-item" href="#" rel="nofollow">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#" rel="nofollow">Separated link</a>
                    </div>
                </div>
            </div>
        </div>
        
    </body>
     
    </html>

    If you refresh your browser, you should get something that looks like the following image. You can see it’s unstlyed.

    Laravel Bootstrap Unstyled

    Now, add the links to the CSS and JavaScript resources and see how the web page changes. Be sure to place the link to the CSS file within the <head>…</head> tag, and the links to the JavaScript files just before the closing body tag. Save and refresh your code, and you should have something like this:

    Laravel-Bootstrap-Styled

    Using A Self-Hosted Bootstrap Template

    Using self-hosted Bootsrap files is quite similar to serving them from a content delivery network. However, in this case you will use relative file paths. The following image shows the file structure of the resources for a Bootstrap theme I am using.

    Bootstrap Template

    Assuming you are using something similar to the image above, navigate to public in your Laravel project and create a folder there. You can name the folder anything you like, but for the sake of this article, name it assets. Paste the JS and CSS folders of your template, along with the folders containing fonts, images and icons here. The next step would be to change the code to work with relative file paths. Change the lines that import the CSS files to look like this:

    1
    2
    <link rel="stylesheet" href="{{asset('assets/css/bootstrap.css')}}"/>
    <!--Links to other CSS file and font files can also be added here-->

    Then change the lines that handle the JS files to look like the following:

    1
    2
    3
    <script src="{{asset('assets/js/jquery-3.4.1.slim.min.js')}}"></script>
    <script src="{{asset('assets/js/bootstrap.min.js')}}"></script>
    <!--Links to other JavaScript files in your template can go here too-->

    You can apply the steps above to virtually any Bootstrap template and beautify your Laravel project. they are very easy to implement.

  • Author
    Posts
Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

FORUM   MEMBERSHIP

Log In
Register Lost Password

POPULAR   FORUM   TOPICS

  • How to find the title of a song without knowing the lyrics
  • Welcome Message
  • How To Change Or Remove The WordPress Login Error Message
  • The Art of Exploratory Data Analysis (Part 1)
  • Replacing The Default SQLite Database With PostgreSQL In Django
  • How to Implement Local SEO On Your Business Website And Drive Traffic
  • Getting Started with SQL: A Beginners Guide to Databases
  • Forums
  • About
  • Contact

© 2021   ·   Ehi Kioya   ·   All Rights Reserved
Privacy Policy