Laravel 5.3 How does bootstrap interpret and display items without internet

Jordan Published at Dev

jordan

I'm still learning Laravel 5.3 and started studying it a few days ago. One tutorial project I'm following made use of Fontawesome and Bootstrap where bootstrap link and fontawesome link was included within the <head></head> tag.

So I thought that if I disconnect the internet connection, it will fail to display the icons from fontawesome since no library file was downloaded and imported to project. But I was surprised that it still was able to display the fontawesome icons.

That's when I of thought of asking this simple question since I'm a beginner with Laravel and web programming. (Java programmer)

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>@yield('title')</title>

    <!-- bootstrap link -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- fontawesome link -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">


    <!-- app.css link -->
    <link rel="stylesheet" href="{{ URL::to('css/app.css') }}">


    @yield('styles')
</head>

I read something from Laravel 5.3 documentation about the bootstrap directory that stores cached information. Is the caching the reason the fontawesome icons still displays even when it is not connected to the internet?

The Bootstrap Directory

The bootstrap directory contains files that bootstrap the framework and configure autoloading. This directory also houses a cache directory which contains framework generated files for performance optimization such as the route and services cache files.

I'd appreciate any explanation to this so I can better understand how it works.

Kyslik

Your browser has cache too. Do hard refresh / reload - in Chrome you can do this by opening inspector and then right click on refresh button and click what suits you the most.

Describing what is actually going on would be too long for an answer.

Good description what is going on is here.

Google search terms: browser cache, web browser cache

If you use build system (gulp) you will most likely end up with large *.css file which contains bootstrap, font-awesome definitions etc.

Laravel 5.3 How does bootstrap interpret and display items without internet

Laravel 5.3 How does bootstrap interpret and display items without internet

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

pump.io port in URL

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

How to import an asset in swift using Bundle.main.path() in a react-native native module

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

BigQuery - concatenate ignoring NULL

Modbus Python Schneider PM5300

Make a B+ Tree concurrent thread safe

What is the exact difference between “ use_all_dns_ips” and "resolve_canonical_bootstrap_servers_only” in client.dns.lookup options?

Svchost high CPU from Microsoft.BingWeather app errors

3D Touch Peek Swipe Like Mail

Printing Int array and String array in one

java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

UWP access denied

Emulator wrong screen resolution in Android Studio 1.3

Google Chrome Translate Page Does Not Work

Apache rewrite or susbstitute rule for bugzilla HTTP 301 redirect

Can a 32-bit antivirus program protect you from 64-bit threats

Is there an option for a Simulink Scope to display the layout in single column?

Unable to use switch toggle for dark mode in material-ui