Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/laravelnews/laravel-twbs4

Laravel 5 frontend preset for Twitter Bootstrap 4
https://github.com/laravelnews/laravel-twbs4

bootstrap4 laravel php

Last synced: 3 months ago
JSON representation

Laravel 5 frontend preset for Twitter Bootstrap 4

Host: GitHub
URL: https://github.com/laravelnews/laravel-twbs4
Owner: laravelnews
License: mit
Archived: true
Created: 2017-10-29T00:31:14.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2018-06-21T18:20:49.000Z (over 6 years ago)
Last Synced: 2024-04-23T23:54:32.785Z (8 months ago)
Topics: bootstrap4, laravel, php
Language: HTML
Homepage: https://laravel-news.com/bootstrap-4-laravel-preset/
Size: 598 KB
Stars: 231
Watchers: 12
Forks: 19
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

README

# Laravel 5.5 Frontend Preset for Boostrap 4

**Note: Laravel 5.6 includes Bootstrap 4, this preset is only needed for Laravel <= Laravel 5.5 LTS**

If you are upgrading a Laravel <= 5.5 application, remove this preset (`laravelnews/laravel-twbs4`) from your `composer.json` file. Laravel 5.6 includes Bootstrap 4, and this preset isn't necessary.

A Laravel frontend preset for [Bootstrap 4](http://getbootstrap.com/), the latest version of Bootstrap.

Current version is the stable release of `^4.0.0`. To learn more about updating to the latest major release of Bootstrap, read the [Migrating to v4](https://getbootstrap.com/docs/4.0/migration/) documentation.

## Installation

You can install this package via composer:

```bash
composer require laravelnews/laravel-twbs4
```
The package will automatically register it's service provider.

Install the basic preset to only update the CSS and JavaScript files:

```bash
php artisan preset bootstrap4
```

Or if you want to install everything, including auth views:

```bash
php artisan preset bootstrap4-auth
```

Next, update NPM packages and build the CSS/JavaScript:

```bash
yarn && yarn dev
```

Or via NPM:

```bash
npm install && npm run dev
```

**Important**: Make sure you have a backup of your code. The presets update `package.json`, and replace views, CSS, and JavaScript.

### jQuery Slim

Bootstrap's [download](https://getbootstrap.com/docs/4.0/getting-started/download/) page includes jQuery slim. If you need `$.ajax`, effects, and deprecated methods, you can change the following line in `resources/assets/js/boostrap.js` to use the full jQuery installation:

```js
window.$ = window.jQuery = require('jquery/dist/jquery.slim');
```

With full jQuery:

```js
// Full jQuery
window.$ = window.jQuery = require('jquery');
```

### Variables

The Bootstrap 4 presets include the same familiar `resources/assets/scss/_variables.scss` file, with some updated values to match Bootstrap 4 variable changes. This preset looks similar to the current `3.x` version that ships with Laravel, but isn't identical.

Here are the variables ported over thus far:

```scss
// Body
$body-bg: #fff;

// Borders
$laravel-border-color: darken($body-bg, 10%);
$list-group-border-color: $laravel-border-color;

$card-border-color: $laravel-border-color;

// Brands
$primary: #3097D1;
$info: #8eb4cb;
$success: #2ab27b;
$warning: #cbb956;
$danger: #bf5329;

// Typography
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: .875rem; // 14px
$line-height-base: 1.6;
$text-color: #636b6f;

// Inputs
$input-border-color: lighten($text-color, 40%);
$input-placeholder-color: lighten($text-color, 30%);
```