Laravel and bootstrap integration

Level 27

This is a very big and open ended question.

I will start with the homepage/index.php of the theme first
Start meaning to convert the theme from HTML into *.blade.php
In the beginning, the returned view() will look broken with missing CSS etc
Next, I will patch up these broken parts by copying in various assets (CSS/fonts/img/js) to the correct paths

Repeat steps 1 to 4 until the whole theme is ported over to blade.

1 like

Level 5

Hey @laracoft,

Sorry it is indeed a chunky block of text... Basically I just don't understand where to start after following the tutorial linked above.

So I'm quite unsure if I did good by just copying the files and pasting them where I think they belong. So in the meantime I did the following :

in public folder :

added a 'fonts' folder (=> pasted all the fonts in there)
added a 'img' folder (=> pasted all the img/svg in there)

In the resources folder :

in the css folder => pasted all the .css files
in the js folder => pasted all the .js files

Can you tell me if this is the correct approach?

NB: Following your reply, I do think I started a similar approach.

> created a layout.blade.php file in the views folder

Level 27

Paste the full HTML of the page you want to start with into app.blade.php
Edit your home.blade.php to be

@extends('layouts.app')
@section('content')
@endsection

Load http://yourdomain.com/home , do you see the (very likely broken) theme you bought?

Level 5

@laracoft èh I might be a fool here but I don't have an app.blade.php, nor home.blade.php..

I just have 1 which is welcome.blade.php (under the views folder). I just made a subfolder here for my 'layout' pages. as I want an include for header, footer, sidebar, navbar, etc... so in that subfolder I can make all my separate layoutpages f.ex. navbar.layout.blade.php.

regarding this :

Paste the full HTML of the page you want to start with into app.blade.php

Unfortunately I already cut the main layout in different include files when i started this project before learning Laravel. Therefore I'm going to try the above steps (put all includes in a layout subfolder) and hopefully I'll be able to add the mall to my welcome.blade.php file and see the correct output. I'll keep you updated!

Again, thank you very much for your effort to reply and help me out. It's really appreciated!!

Level 27

@gillesdeb ok

paste your <doctype> HTML into the app.blade.php
Load http://yourdomain.com/welcome do you see part of your HTML now?

1 like

Level 5

@laracoft

This is my layout.blade.php file (should be renamed header.layout.blade.php)

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- App css -->
    
    <link rel="stylesheet" href="{{ asset('css/icons.min.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ asset('css/app.min.css') }}" type="text/css" id="light-style">
    <link rel="stylesheet" href="{{ asset('css/app-dark.min.css') }}" type="text/css" id="dark-style">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">

<!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="{{ asset('public/fonts') }}">

<!-- App favicon -->
    <link rel="shortcut icon" href="{{ asset('img/favicon.ico') }}">

<!-- page title -->
    <title>TEST</title>
</head>
@yield ('content')

And this is a small part of my welcome.blade.php

<section class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-5">
                    <div class="mt-md-4">

result: it just shows plain html

edit: maybe this helps? https://imgur.com/a/QCNnoDd its a structure of the bootstrap template and screenshots of how i implemented it into laravel project

Level 27

I just wanted to reuse what Laravel already provides to get you started
Since you want to use layout.blade.php, my question is, are you able to get it to show in your browser?
If you are not, why not just stick to app.blade.php for now? We can worry about layout later

Level 5

@laracoft

* I understand, but I followed the tutorial 'how to get started' (linked above) and no app.blade.php view was available

* Yes, I use layout.blade.php because that is what i added (only welcome.blade.php was premade) I can change it to app.blade.php but don't understand what the difference would be

* It's no issue how the file is named, more important to get it working, but think I must be missing something as you refer to the app.blade.php... that should be in views right? In that case, I didn't have it from the start --> was following the tutorial to integrate bootstrap a mistake? Looks like my views file should have a 'layouts' folder in which the app.blade.php is. Is that right? In that case, that's what I'm missing...

my question is, are you able to get it to show in your browser?

Yes, i can output in my browser. However it is just plain html not bootstrap styling

I tried the following :

<!-- App css -->
    
    <link rel="stylesheet" href="{{ asset('css/icons.min.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ asset('css/app.min.css') }}" type="text/css" id="light-style">
    <link rel="stylesheet" href="{{ asset('css/app-dark.min.css') }}" type="text/css" id="dark-style">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

^ I added the app.css in the stylesheet, resulting in a partly convert to the bootstrap layout. However large sections are just plain. Taking this in account, I also put all the scripts from the resources/js folder and put them below in the code. This did not change a thing though.

<script src="{{ asset('js/vendor.min.js')"></script>
<script src="{{ asset('js/app.min.js')"></script>
<script src="{{ asset('js/main.js')"></script>
<script src="{{ asset('js/bootstrap.js')"></script>
<script src="{{ asset('js/app.js')"></script>
<script src="{{ asset('js/app.min.js.map')"></script>

thewebartisan7

Best Answer

Level 14

Considering your screenshot here https://imgur.com/a/QCNnoDd

You put css and js inside resources/css and resources/js right?

Just move in public/ folder

All files in resources/css move in public/css and all files in resources/js move in public/js

Only public folder is accessible via browser, everything else is not accessible via browser.

1 like

Level 27

Yes, move your JS, CSS, img and fonts into public/js, public/css, public/img and public/fonts
Show your full HTML code if you still have errors.
Or use Chrome's Developer tools to see network errors and make further changes.

1 like

Level 5

U Legends @laracoft @thewebartisan7 !! Now i'm getting there!

One follow up question, a few weeks ago i had this advice under a question posted by me :

you shouldn't need to be interacting with css in your public directory. To edit css, you should be modifying app.css inside /resources/app.css and then running 'npm run watch' to watch changes and then publish to /public/css/.

if you've modified /public/css/app.css and have 'npm run watch' running, you'll be overwriting your changes with those inside resources, and this will clear out any css you've run.

Does this mean I just have duplicates in the resources folder and make the changes there? = not touch the public/css but only resources/ccs/duplicate if I want to make a change?

thewebartisan7

Level 14

that is for the source files of CSS, that you see in your theme in SASS lang with extension .scss, see https://sass-lang.com/

It can be complicated if you only know CSS.

You can keep all in public and edit directly CSS files.

But if you want to learn SASS, then you will get superpowers over normal CSS, but that is another story.

1 like