For some reason I keep forgetting these breakpoints and have to search them on the net.
Bootstrap breakpoints in pixels:
In other words,
One of the first thing many, including me, want to do after installing Laravel 4 is to add Twitter Bootstrap. If you go searching for this on Google you will get all kids of results that may confuse beginner. “Use Bower”, “Install it as a external package then use Basset” and several more. I think some are a little too complicated for a beginner and it doesn’t need to be. I know adding a line to composer.json is easy but this will usually (depending on whcih package you chose) download gazillion of files to your vendor folder.
Here is what to do for a simple website – you don’t need to treat it as a external package that needs to be added via composer, bower or be used with help of Basset etc. Sure, it’s easier to update it via composer but it is not that difficult to update it manually too – if you indeed need an update.
So here are few easy ways:
Simply include 3 links, which will fetch your twitter bootstrap files from MaxCDN site. This is the easiest and fastest way. Let’s assume that you have a master blade template called default.blade.php. Place this code inside your HTML head section (anywhere):
<head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head>
That’s it, you should now be able to use Twitter Bootstrap goodness.
I like to host my own files and not depend on third party so I usually do this. Here we don’t treat Twitter Bootstrap as a Laravel package.We will bypass Composer so we manually put Twitter Bootstrap files into our public assets folder.
Go to getbootstrap.com, download Twitter Bootstrap ZIP file and extract the content of ZIP file (pull entire dist folder) to your /public/ folder. I usually rename dist folder to tb.
You will then end up with css,fonts and js folders inside /public/tb/ folder.
Now we follow the same procedure like before except that we will link to local files we just downloaded. I will use Laravel’s HTML helper to create links. {{ and }} is a Laravel Blade syntax.
<head>
{{ HTML::style('tb/css/bootstrap.css') }}
{{ HTML::style('tb/css/bootstrap-theme.min.css') }}
{{ HTML::script('tb/js/bootstrap.min.js') }}
</head>
As you can guess the first two lines will create CSS style links and the third one will create script link. If you view the source of generated page you will see that Laravel’s HTML helper created something like this (of course http://yoursite.dev will be replaced by your site) :
<head> <link media="all" type="text/css" rel="stylesheet" href="http://yoursite.dev/tb/css/bootstrap.css"> <link media="all" type="text/css" rel="stylesheet" href="http://yoursite.dev/tb/css/bootstrap-theme.min.css"> <script src="http://yoursite.dev/tb/js/bootstrap.min.js"></script> </head>
There are other ways (Bower, Composer, Basset…), which I might show in another post (or maybe I’ll update this post later) but these two are the easiest, especially for those just starting with Laravel 4.
Enjoy your Twitter Bootstrap powered Laravel 4 website 🙂
While building my new admin/CMS with Laravel 4 and Gebo Admin (really cool twitter bootstrap responsive admin template) I encountered weird problem while using bootstrap tabs –Â after I added “enhanced select” (Country dropdown) suddenly a horizontal scroll bar appeared!
I am not sure if this is 100% best solution (I am not that keen on digging into all this .js stuff) but the easiest way to fix this is to open Bootstrap.min.css, search for .tab-content and then replace
overflow: auto;
with
overflow: hidden;
Reload your page and the horizontal scrollbar is gone.