Bootstrap : Default Text Sizes

Bootstrap’s font sizes are calculated off of the body font size by using rem values. If you change
the body font size all styles will be increased/decreased automatically. Rem stands for “root em”
because it calculates the size based on the size of the root of the document or body tag.

Tag / ClassDefault Font size
body16px; line-height: 1.5;
font-family: “Helvetica Neue”, Helvetica, Arial,
sans-serif;
p, li1rem / 16px
h12.5rem / 40px
h1 small80% / 32px
h22rem / 32px
h2 small80% / 25.6px
h31.75rem / 28px
h3 small80% / 22.4px
h41.5rem / 24px
h4 small80% / 24px
h51.25rem / 20px
h5 small80% / 16px
h61rem / 16px
h6 small80% / 12.8px
.display-16rem / 90px
.display-25.5rem / 82.5px
.display-34.5rem / 67.5px
.display-43.5rem / 52.5px
Tagged : / / / / / / / / / / / / /

Bootstrap utilities : “Vertical align”

Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

Change the alignment of elements with the vertical-alignment utilities.

These are the classes:- .align-baseline, .align-top.align-middle.align-bottom.align-text-bottom, and .align-text-top as needed.

Tagged : / / / / / / / / / / / / / / / / /

Bootstrap Utilities : Text

Text Utilities classes, contains various text properties, such as, text alignment, text wrapping, text overflow, text transformation, font weight, italics, monospace, resetting color of text, removing text decorations.

1. Text alignment :

  • .class text-justify
  • .class text-left
  • .class text-center
  • .class text-right
  • .class text-sm|md|lg|xl-left

2. Text wrapping and overflow :

  • .class text-wrap
  • .class text-nowrap
  • .class text-truncate

3. Word break :

  • .class text-break

4. Text transform :

  • .class text-lowercase
  • .class text-uppercase
  • .class text-capitalize

5. Font weight and italics :

  • .class font-weight-bold
  • .class font-weight-bolder
  • .class font-weight-normal
  • .class font-weight-light
  • .class font-weight-lighter
  • .class font-italic

6. Monospace :

  • .class text-monospace

7. Reset color :

  • .class text-muted

8. Text decoration

  • .class text-decoration-none
Tagged : / / / / / / / / / / / / /

Bootstrap Utilities : Spacing

Spacing helpers are useful for modifying the padding and margin of an element.

Where property is one of:

  1. msets margin
  2. p-sets padding

Sides is one of:-

  • t-sets margin-padding “top
  • b-sets margin-padding “bottom
  • l-sets margin-padding “left
  • r-sets margin-padding “right
  • x-sets padding left|right or margin left|right
  • y-sets padding top|bottom or margin top|bottom
  • blank-sets margin padding on all sides of the element

Size is one of:-

  • 0-sets m|p to 0
  • 1-sets m|p to .25rem
  • 2-sets m|p to .5rem
  • 3-sets m|p to 1rem
  • 4-sets m|p to 1.5rem
  • 5-sets m|p to 3rem
  • auto-sets margin to auto

Negative margin :-

  • n1-sets margin to -.25rem
  • n2-sets margin to -.5rem
  • n3-sets margin to -1rem
  • n4-sets margin to -1.5rem
  • n5-sets margin to -3rem
Tagged : / / / / / / / / / / / / / / /

Bootstrap Utilities : “Screenreaders”

.sr-only class is used to hide an element in all device except screenreader.

Tagged : / / / / / / / / / / / /

Bootstrap Utilities : “Shadows”

box-shadow utilities class is use to add or remove shadows in the elements.

<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
Tagged : / / / / / / / / /

Laravel 5.8 crud operation “easy way”

Laravel:-Open source web application framework, written in PHP.

Step 01 : Install Laravel 5.8

composer create-project --prefer-dist laravel/laravel 002 "5.8.*"

“002” is a project name and 5.8 is a version of Laravel.

Step 02 : Update database configuration

A : .env

B : phymyadmin

NOTE:- Same name .env and database.

Step 03 : Make mode with -mcr

 php artisan make:model Today -mcr

Step 04 : Inside todays table (migrations)

Step 05 : Migrate with database

php artisan migrate

Step 06 : Make blade file in resources

Step 07 :make button in laravel dashboard (Welcome.blade.php)

 <a href="{{route('student')}}"><button type="button" btn btn-primary>Student</button></a>

Route for button inside TodayController :- Route::get(‘student’, ‘TodayController@index’)->name(‘student’);

Call blade file from index function(TodayController) :-  return view(‘day.index’);

resources->views->day->layout.blade.php

resources->views-> day->index.blade.php

#Make route for show data , back and submit.

Route::post(‘store’, ‘TodayController@store’)->name(‘store’); //store data

Route::get(‘show’, ‘TodayController@show’)->name(‘show’); // show data

Route::get(‘home’, ‘HomeController@dashboard’)->name(‘dashboard’); // back to dashboard of Laravel

Store data in data base when we hit the submit button

Step 08 : Show data (when we click on show data button)

  1. <a href=”{{route(‘show’)}}”><button type=”button” class=”btn btn-info float-right”>Show Data</button></a> // route in button
  2. Route::get(‘show’, ‘TodayController@show’)->name(‘show’); // Route (web.php)
  3. Inside show function inside TodayController
 public function show(Today $today)
    { 
        $todays =Today::all();
       return view('day.show',compact('todays'));
    }

4. Return show.blade.php With compact (all data)

5. Route in edit and delete button.

 <a href=”{{route(‘edit’,[‘id’=> $today->id])}}”><button type=”button” class=”btn btn-primary”>edit</button></a> // edit data

<a href=”{{route(‘delete’, [‘id’ => $today->id])}}”><button type=”button” class=”btn btn-danger”>Delete</button></a> // delete data

Step 09 : Edit data (edit button)

1.<a href=”{{route(‘edit’,[‘id’=> $today->id])}}”><button type=”button” class=”btn btn-primary”>edit</button></a> // edit data in edit button

2. Route::get(‘edit/{id}’, ‘TodayController@edit)->name(‘edit’); // edit route

3.TodayController->edit function

 public function edit($id)
    {
        Log::info('inside edit function');
        Log::info($id);
        $today =Today::find($id);
        return view('day.edit',compact('today'));
    }

4. return to blade file edit.blade.php

Submit button update function (TodayController)

Step 10 : Delete data

Tagged : / / / / / / /

Bootstrap: Utilities “Embed”

Bootstrap embeds is a utility that helps you insert video or slideshow in the page keeping width of the parent and scales on any device.

Tagged : / / / / / / / / / /

Bootstrap: Utilities “Display”

Bootstrap utility display changes the value of the property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.

Screen SizeClass
Hidden an element.d-none
Hides an element on a specific screen size.d-*-none
Hidden only on xs.d-none .d-sm-block
Hidden only on sm.d-sm-none .d-md-block
Hidden only on md.d-md-none .d-lg-block
Hidden only on lg.d-lg-none .d-xl-block
An element inline.d-inline
An element inline on a specific screen size.d-*-inline
An element inline-block.d-inline-block
An element inline-block on a specific screen size.d-*-inline-block
An Element display as a table.d-table
An element display as a table on a specific screen size.d-*-table
An element display as a table cell.d-table-cell
An element display as a table cell on a specific screen size.d-*-table-cell
An element display as a table row.d-table-row
An element display as a table row on a specific screen size.d-*-table-row
Creates a flexbox container and transforms direct children into flex items.d-flex
Creates a flexbox container on a specific screen size.d-*-flex
Creates an inline flexbox container.d-inline-flex
Creates an inline flexbox container on a specific screen size.d-*-inline-flex

Syntax:-

<div class="container mt-4">
  <h2>Display Inline Block</h2>
  <p>Use the d-inline-block class.</p>
  <div class="d-inline-block">Inline block DIV.</div>
  <div class="d-inline-block">Inline block DIV.</div>
</div>
Tagged : / / / / / / / /

Bootstrap:-Component “Spinners”

Bootstrap “spinners” is used to display the loading state in your projects.

How can a spinner be:-

  • Colored Spinners by using <div class=”spinner-border text-primary”></div>.
  • Growing Spinners by using <div class=”spinner-grow text-danger”></div>.
  • Spinner Size by using <div class=”spinner-border spinner-border-sm”></div>.
  • Spinner Buttons by using inside button tag <span class=”spinner-border spinner-border-sm”></span>.
Tagged : / / / / / / / / / /