Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best method to use Bootstrap in Laravel 4

I am using now Laravel 4,
What is the best method to use bootstrap for my site?
Is there some stuff I need to change and where do I put the css files?

Someone said that I need to use the composer and another said that I need to use the artisan

Thanks

like image 554
Thom Avatar asked May 28 '14 18:05

Thom


People also ask

Can I use Bootstrap with Laravel?

Introduction. While Laravel does not dictate which JavaScript or CSS pre-processors you use, it does provide a basic starting point using Bootstrap, React, and / or Vue that will be helpful for many applications.

Can I use Bootstrap with Laravel breeze?

Breeze provides a minimal and simple starting point for building a Laravel application with authentication. Styled with Bootstrap, Breeze publishes authentication controllers and views to your application that can be easily customized based on your own application's needs.

What version of Bootstrap does Laravel use?

Laravel uses bootstrap 4 to start.


2 Answers

Some things you must know about Laravel:

It has directly nothing to do with your front end, including Twitter Bootstrap.

Where you put your files is entirely up to you, but the public folder is (usually) where your public viewable files must go.

CSS and JavaScript files are directly downloaded by browser, so those files should be in your public folder.

To download/use Bootstrap you have some options:

1) Go to http://getbootstrap.com/ and download it.

2) Use bower (https://github.com/bower/bower) to download it for you.

3) If you are planning using a Bootstrap template, usually those already come with Bootstrap.

4) Use a CDN, like http://www.bootstrapcdn.com/

I, personally, use bower, those are the steps you can follow to install and use it:

Install it

[sudo] npm install bower

Create a .bowerrc file in your project dir, which tells bower where to download your packages:

{
    "directory": "public/bower"
}

Create a bower.json file, which holds your installed packages:

{
  "name": "YourApp.com",
  "dependencies": {
  }
}

Then you just need to install your packages using it:

bower install bootstrap -S
bower install jquery -S

And you can also use it to find packages

bower search google-code-prettify

After installing bootstrap, your css files would be located at:

public/bower/bootstrap/dist/css/

In Laravel there are many ways of including your assets, this is one of those, using Blade as you view compiler:

<link href="{{ asset('bower/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
like image 177
Antonio Carlos Ribeiro Avatar answered Sep 23 '22 13:09

Antonio Carlos Ribeiro


Here's the approach if you don't want to use bower.

  • Download bootstrap and extract the contents inside public/components/

  • Using Blade as your view compiler, use it like this:


<link href="{{ asset('components/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">

or like this

{{ HTML::style('components/bootstrap/dist/css/bootstrap.min.css') }}
like image 39
Adrian Enriquez Avatar answered Sep 21 '22 13:09

Adrian Enriquez