Last time , I created a screen to display the article list and articles, but because I have not set up any CSS, it is a very disappointing screen. This time, I will apply Bootstrap , which is a CSS framework , to arrange the display.
HOW TO INSTALL BOOTSTRAP
There are several ways to deploy Bootstrap.
- Use the Bootstrap CDN
- Download the compiled Bootstrap and place it under the public directory
- Download the Bootstrap source with npm and place it in the public directory using Laravel Mix
Although 4. can be optimized most, it requires knowledge of frontends such as node, npm and Laravel Mix.
Please see the official site for information on how to use Laravel Mix in 4.
MODIFY LAYOUT FILE
- Add default CSS import.
- Add a div and enclose @yield (‘content’).
If you specify class=”container py-4” for div, Bootstrap will display the margins at the top, bottom, left, and right.
The usage of Bootstrap can not be explained here, so please visit the official site. https://getbootstrap.com/
INDICATE CONTENT CONFIRMATION
Go to http://localhost:8000/articles/ and check the display. It is a success if there are left and right margins.
It was not so much change in the present situation saying that the display was adjusted (sweat). I will create menus and forms in the future, and at that time, I think that you can see the beauty of Bootstrap.
Take a look at the official Bootstarp site to see what you can do. https://getbootstrap.com/