Experiment Number 1:: What Is Bootstrap?

Experiment Number 1: To install and setup the HTML5 based Bootstrap
framework and to deploy basic HTML elements using Bootstrap CSS.
What is Bootstrap?
Bootstrap is a widely used open-source front-end framework for developing responsive
and visually appealing web applications. In this experiment, you will learn how to install
and set up the HTML5-based Bootstrap framework and utilize it to deploy basic HTML
elements styled with Bootstrap's CSS classes.
How to download Bootstrap 5:

1. Visit the Official Bootstrap Website:
Open your web browser and go to the official Bootstrap website at
https://getbootstrap.com.
2. Download Bootstrap:
Once you are on the Bootstrap website, you can download the framework in
two ways:
a. Download Precompiled Bootstrap:
-- Scroll down the Bootstrap website's homepage.

-- In the "Download" section, you will find two main options:
• Download compiled CSS and JS: This is the recommended option
for most users. It includes precompiled CSS and JavaScript files that
are ready to use in your projects.
• Download source files: This option is for advanced users who want
to customize Bootstrap's styles and components.
1
b. Download Using CDN (Content Delivery Network):
• If you prefer not to download Bootstrap and instead want to use it via
a CDN, you can find the CDN links in the "Quick Start" section of the
Bootstrap website. These links allow you to include Bootstrap directly
in your HTML files without downloading any files.
3. Choose the Compiled Version:

If you choose to download the compiled CSS and JS files, click the
"Download" button next to the "Download compiled CSS and JS" option.
This will start the download of a ZIP file containing Bootstrap.
4. Extract the ZIP File:

After the download is complete, locate the ZIP file on your computer and
extract its contents to a folder of your choice.
2
5. Access Bootstrap Files:
Inside the extracted folder, you will find the necessary Bootstrap CSS and
JavaScript files that you can include in your HTML documents.
Bootstrap Versions
Bootstrap 5 (released 2021) is the newest version of Bootstrap (released 2013);
with new components, faster stylesheet and more responsiveness.
Bootstrap 5 supports the latest, stable releases of all major browsers and platforms.
However, Internet Explorer 11 and down is not supported.
The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5
has switched to vanilla JavaScript instead of jQuery.
CDN or Content Delivery Network is a content distribution network of servers.
Bootstrap min V/S without min:

They have exactly the same function, but the . min. css version has been minified,
meaning all whitespace has been removed to reduce file size and increase speed.
Bootstrap CDN Bootstrap Download

Bootstrap CDN usage leads to faster loading time The loading time will remain the same when we
due to caching and geographically close servers of use Bootstrap Download.
the CDN network.
3
CDN might be down sometimes or due to proxy Local copy has no dependency on CDN links and
settings, or security policies, the CDN link may not will always be up.
work.
It reduces the amount of bandwidth used by your Server bandwidth remains the same.
server.
Basic HTML elements:

Form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-
4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<title>Form</title>
</head>
<body>
<div class="container">
4
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>

<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">

<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
</body>
</html>
OUTPUT:
5
TABLE:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<title>Form</title>
</head>
<body>
<table class="table">
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Elective Subject</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<th scope="row">1</th>
<td>Rajat</td>
<td>Garg</td>
6
<td>AWT</td>
</tr>
<tr class="table-light">
<th scope="row" class="table-danger">2</th>
<td class="table-success">Puneet</td>
<td class="table-secondary">Walia</td>
<td>BIA</td>
</tr>
<tr class="table-warning">
<th scope="row ">3</th>
<td >Pratham</td>
<td >Goyal</td>
<td>Crypto</td>
</tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
</body>
</html>
7
Experiment Number 2: To understand and deploy the multicolumn grid layout
of Bootstrap.
Break Points:
Breakpoints are customizable widths that determine how your responsive
layout behaves across device or viewport sizes in Bootstrap.
Breakpoint Class infix Dimensions

Extra small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multi-Column Grid Layout</title>
<link rel="stylesheet" href="bootstrap-5.0.2-dist\css\bootstrap.css">
</head>
<body>
<h1>Multi-Column Grid Layout</h1>
<div class="row">
<div class="col-lg-3 col-md-4 col-6">
<div class="card">
<div class="card-body">
<h3>Column 1</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Ab vitae at in suscipit quod maxime dignissimos error architecto dolore
voluptatum?</p>
</div>
</div>
</div>
<div class="card">
<h3>Column 2</h3>
8
voluptatum?</p>
</div>
</div>
</div>
<div class="card">
<h3>Column 3</h3>
voluptatum?</p>
</div>
</div>
</div>
<div class="card">
<h3>Column 4</h3>
voluptatum?</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
For large Screen size there are 4 columns
9
For medium Screen there are 3 columns
For Small Screen size there are 2 columns
10
Difference In Container and Container-Fluid
Container: The .container class provides a responsive fixed width

container.
<!DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet"
integrity="sha384-
4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQ
Iu9" crossorigin="anonymous">
<title>Bootstrap</title>
</head>
<body>
<div class="container my-2 ">
<div class="row bg-info"><p class="text-center text-white">Welcome to grid

system</p></div>
<div class="row">
<div class="col col-6 col-lg-9 bg-primary text-center me-3 my-2 ">
1st Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat,
perferendis! Itaque nulla corporis repudiandae molestias doloremque deleniti asperiores,
ad alias expedita ullam quam iusto, provident aperiam officia voluptatibus nam
aspernatur?
11
</div>
<div class="col bg-danger text-center my-2 ms-2 text-success">
2nd Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio quia
quisquam ex architecto et eaque fuga aperiam recusandae! Repellendus consequatur
quisquam ea rem est error beatae, quo doloribus illo voluptate.
</div>
</div>
<div class="row bg-dark"><p class="text-center text-light">This is
Footer</p></div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
</body>
</html>
Container-Fluid: The .container-fluid class provides a full width

container, spanning the entire width of the viewport.
12
<!DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet"
integrity="sha384-
4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQ
Iu9" crossorigin="anonymous">
<title>Bootstrap</title>
</head>
<body>
<div class="container-fluid my-2 ">
<div class="row bg-info"><p class="text-center text-white">Welcome to grid

system</p></div>
<div class="row">
<div class="col col-6 col-lg-9 bg-primary text-center me-3 my-2 ">
1st Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat,
perferendis! Itaque nulla corporis repudiandae molestias doloremque deleniti asperiores,
ad alias expedita ullam quam iusto, provident aperiam officia voluptatibus nam
aspernatur?
</div>
<div class="col bg-danger text-center my-2 ms-2 text-success">
13
2nd Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio quia
quisquam ex architecto et eaque fuga aperiam recusandae! Repellendus consequatur
quisquam ea rem est error beatae, quo doloribus illo voluptate.
</div>
</div>
<div class="row bg-dark"><p class="text-center text-light">This is
Footer</p></div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
</body>
</html>
14
Experiment Number 3: To deploy different types of buttons, progress bars,
modals and navigation bars using Bootstrap.
Navigation Bar: The navigation bar with Bootstrap is as follows:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-
toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
15
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else
here</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Modals and Buttons:


<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">
This is Modal
</button>


<div class="modal fade" id="exampleModal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
16
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal
title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save
changes</button>
</div>
</div>
</div>
</div>
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email
address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with
anyone else.</div>
</div>
17
<div class="mb-3">
<label for="exampleInputPassword1" class="form-
label">Password</label>
<input type="password" class="form-control"
id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me
out</label>
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</form>
18
Experiment Number 4: To create and setup the Git repository on Bitbucket
or github using SSH.
Step 1: Install Git

Download and install Git from the official website: https://git-scm.com/download/win
After writing command git this is shown on cmd.
Step 2: Configure Git

Set your Git username and email by running these commands in your terminal:
git config --global user.name "rajat-28"
git config --global user.email “[email protected]”
Step 3: Generate SSH Key

Generate an SSH key to securely connect to GitHub:
ssh-keygen -t ed25519 -C “[email protected]”
19
20
This is the place where SSH Key is generated
C:\Users\rajat\.ssh
Step 5: Add SSH Key to GitHub

Copy your public SSH key to your clipboard:
cat ~/.ssh/id_ed25519.pub
Go to GitHub account settings, under "SSH and GPG keys," click "New SSH key," and paste public
keythere.
21
Step 6: Create a New Repository on GitHub
On GitHub, click the "+" icon in the top right corner and select "New repository." Fill in the
repositoryname, description, and other options.
This is the SSH Key link of repository “Demo”.
22
Experiment Number 5: To perform push, c lone and patch operation to Git
repository.
CLONE:
git clone <repository-url>
git clone https://github.com/rajat-28/myportfolio
PUSH:
git push <remote-name> <branch-name>
git push origin main
PATCH:
1. Generate the patch:
git diff > some-changes.patch
2. Apply the diff:

git apply /path/to/some-changes.patch
23
24
Experiment Number 6: To install and setup the CodeIgniter Framework
and to understand its MVC architecture.
Installation with Composer:

In terminal go to the root folder of project and type the command
composer create-project codeigniter4/appstarter project-name
These files will be created:
As CodeIgniter is based on MVC architecture , In App folder there are different

folders of Model, View and Controllers.
25
26
Experiment Number 7: To construct a simple login page web application
to authenticate users using CodeIgniter Framework and also perform CURD
operations.
CURD stands for Create, Update, Read and Delete.
• Create a new project using composer.
• Start the Xampp server
• Create a database named as demo
We will create a form for user details in which users can add their details and
can update, delete and view those details.
1.Create: This will take input from user in a form.
2.Update: This will enable user to update the details.
3.Read: This will display the details of users in a table.
4.Delete: This will enable user to delete their details.
Firstly create views:

1.add_user.php:
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter 4 Add User With Validation Demo</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
>
<style>
.container {
max-width: 500px;
}
.error {
display: block;
27
padding-top: 5px;
font-size: 14px;
color: red;
}
</style>
</head>
<body>
<div class="container mt-5">
<form method="post" id="add_create" name="add_create"
action="<?= site_url('/submit-form') ?>">
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control">
</div>
<label>Email</label>
<input type="text" name="email" class="form-control">
</div>
<button type="submit" class="btn btn-primary btn-block">Update
Data</button>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-
validate/1.19.2/jquery.validate.js"></script>
28
validate/1.19.2/additional-methods.min.js"></script>
<script>
if ($("#add_create").length > 0) {
$("#add_create").validate({
rules: {
name: {
required: true,
},
email: {
required: true,
maxlength: 60,
email: true,
},
},
messages: {
name: {
required: "Name is required.",
},
email: {
required: "Email is required.",
email: "It does not seem to be a valid email.",
maxlength: "The email should be or equal to 60 chars.",
},
},
})
}
</script>
29
</body>
</html>
2. edit_view.php:
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter 4 CRUD - Edit User Demo</title>
>
<style>
.container {
max-width: 500px;
}
.error {
display: block;
padding-top: 5px;
font-size: 14px;
color: red;
}
</style>
</head>
<body>
<form method="post" id="update_user" name="update_user"
action="<?= site_url('/update') ?>">
<input type="hidden" name="id" id="id" value="<?php echo
$user_obj['id']; ?>">
30
<label>Name</label>
<input type="text" name="name" class="form-control" value="<?php echo
$user_obj['name']; ?>">
</div>
<label>Email</label>
<input type="email" name="email" class="form-control" value="<?php
echo $user_obj['email']; ?>">
</div>
<button type="submit" class="btn btn-danger btn-block">Save
Data</button>
</div>
</form>
</div>
validate/1.19.2/jquery.validate.js"></script>
validate/1.19.2/additional-methods.min.js"></script>
<script>
if ($("#update_user").length > 0) {
$("#update_user").validate({
rules: {
name: {
required: true,
},
email: {
31
required: true,
maxlength: 60,
email: true,
},
},
messages: {
name: {
required: "Name is required.",
},
email: {
required: "Email is required.",
email: "It does not seem to be a valid email.",
maxlength: "The email should be or equal to 60 chars.",
},
},
})
}
</script>
</body>
</html>
3.user_view.php:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
32
<title>Codeigniter 4 CRUD App Example - positronx.io</title>
>
</head>
<body>
<div class="d-flex justify-content-end">
<a href="<?php echo site_url('/user-form') ?>" class="btn btn-success mb-
2">Add User</a>
</div>
<?php
if(isset($_SESSION['msg'])){
echo $_SESSION['msg'];
}
?>
<div class="mt-3">
<table class="table table-bordered" id="users-list">
<thead>
<tr>
<th>User Id</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php if($users): ?>
33
<?php foreach($users as $user): ?>
<tr>
<td><?php echo $user['id']; ?></td>
<td><?php echo $user['name']; ?></td>
<td><?php echo $user['email']; ?></td>
<td>
<a href="<?php echo base_url('edit_view/'.$user['id']);?>" class="btn
btn-primary btn-sm">Edit</a>
<a href="<?php echo base_url('delete/'.$user['id']);?>" class="btn btn-
danger btn-sm">Delete</a>
<a href="<?php echo base_url('delete/'.$user['id']);?>" class="btn btn-
danger btn-sm">Delete</a>
</td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script type="text/javascript"
src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#users-list').DataTable();
34
} );
</script>
</body>
</html>
Models:
UserModel.php:
<?php
namespace App\Models;
use CodeIgniter\Model;
class UserModel extends Model
{
protected $table = 'users';
protected $primaryKey = 'id';
protected $allowedFields = ['name', 'email'];

}
Controller:
UserCrud.php
<?php
namespace App\Controllers;
use App\Models\UserModel;
use CodeIgniter\Controller;
class UserCrud extends Controller
{
// show users list
35
public function index(){
$userModel = new UserModel();
$data['users'] = $userModel->orderBy('id', 'DESC')->findAll();
return view('user_view', $data);
}
// add user form
public function create(){
return view('add_user');
}
// insert data
public function store() {
$data = [
'name' => $this->request->getVar('name'),
'email' => $this->request->getVar('email'),
];
$userModel->insert($data);
return $this->response->redirect(site_url('/users-list'));
}
// show single user
public function singleUser($id = null){
$data['user_obj'] = $userModel->where('id', $id)->first();
return view('edit_view', $data);
}
// update user data
36
public function update(){
$id = $this->request->getVar('id');
$data = [
'name' => $this->request->getVar('name'),
'email' => $this->request->getVar('email'),
];
$userModel->update($id, $data);
}
// delete user
public function delete($id = null){
$data['user'] = $userModel->where('id', $id)->delete($id);
}
}
Create the routes:
<?php
use CodeIgniter\Router\RouteCollection;
/**
* @var RouteCollection $routes
*/
37
// CRUD RESTful Routes
$routes->get('/', 'UserCrud::index');
$routes->get('users-list', 'UserCrud::index');
$routes->get('user-form', 'UserCrud::create');
$routes->post('submit-form', 'UserCrud::store');
$routes->get('edit_view/(:num)', 'UserCrud::singleUser/$1');
$routes->post('update', 'UserCrud::update');
$routes->get('delete/(:num)', 'UserCrud::delete/$1');
In database.php add the database:

public array $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'demo',
'DBDriver' => 'MySQLi',
'DBPrefix' => '',
'pConnect' => false,
'DBDebug' => true,
'charset' => 'utf8',
'DBCollat' => 'utf8_general_ci',
'swapPre' => '',
'encrypt' => false,
'compress' => false,
'strictOn' => false,
'failover' => [],
38
'port' => 3306,
'numberNative' => false,
];
Add User:
User View:
Update data:
39
Add new user:
New user added:
Deleted the users:
40
Experiment Number 8: To install and setup, configure the Laravel
Framework.
Installing Laravel via composer:
Then go to the specified project:
41
Start the development server:
This is by default welcome page of Laravel

We can configure the files according to our requirements.
42
Experiment Number 9: To construct the any simple web application using
Laravel Framework.
Firstly we will create the controller in http/Controllers/Controller.php
<?php
namespace App\Http\Controllers;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Routing\Controller as BaseController;
use App\User;
use App\Http\Controllers\Controller;
class Controller extends BaseController

{
public function display(){
return view('welcome',['name'=>'Rajat']);
}
}
Now we will create the routes in routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Controller;
Route::get('/', [Controller::class,'display']);
43
Now create the model Models/User.php
<?php
namespace App\Models;
// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable

{
use HasApiTokens, HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var array<int, string>
*/
protected $fillable = [
'name',
'email',
'password',
];
/**
* The attributes that should be hidden for serialization.
*
* @var array<int, string>
44
*/
protected $hidden = [
'password',
'remember_token',
];
/**
* The attributes that should be cast.
*
* @var array<string, string>
*/
protected $casts = [
'email_verified_at' => 'datetime',
'password' => 'hashed',
];
}
Now we will create views in Resources/view/welcome.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>Name is: <?php echo $name?></h1>
</body>
</html>
45

Experiment Number 1:: What Is Bootstrap?

Uploaded by

Copyright:

Available Formats

Experiment Number 1:: What Is Bootstrap?

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Experiment Number 1:: What Is Bootstrap?

Uploaded by

Copyright:

Available Formats

Experiment Number 1: To install and setup the HTML5 based Bootstrap

framework and to deploy basic HTML elements using Bootstrap CSS.

How to download Bootstrap 5:

a. Download Precompiled Bootstrap:

-- Scroll down the Bootstrap website's homepage.

3. Choose the Compiled Version:

4. Extract the ZIP File:

Bootstrap min V/S without min:

Bootstrap CDN Bootstrap Download

Basic HTML elements:

<label for="exampleInputPassword1" class="form-label">Password</label>

<input type="checkbox" class="form-check-input" id="exampleCheck1">

Breakpoint Class infix Dimensions

For Small Screen size there are 2 columns

Container: The .container class provides a responsive fixed width

<div class="row bg-info"><p class="text-center text-white">Welcome to grid

Container-Fluid: The .container-fluid class provides a full width

<div class="row bg-info"><p class="text-center text-white">Welcome to grid

Navigation Bar: The navigation bar with Bootstrap is as follows:

Modals and Buttons:

Step 1: Install Git

After writing command git this is shown on cmd.

Step 2: Configure Git

git config --global user.name "rajat-28"

git config --global user.email “[email protected]”

Step 3: Generate SSH Key

ssh-keygen -t ed25519 -C “[email protected]”

Step 5: Add SSH Key to GitHub

This is the SSH Key link of repository “Demo”.

2. Apply the diff:

Installation with Composer:

These files will be created:

As CodeIgniter is based on MVC architecture , In App folder there are different

Firstly create views:

protected $allowedFields = ['name', 'email'];

Create the routes:

In database.php add the database:

New user added:

Deleted the users:

Installing Laravel via composer:

Then go to the specified project:

This is by default welcome page of Laravel

Firstly we will create the controller in http/Controllers/Controller.php

class Controller extends BaseController

Now we will create the routes in routes/web.php

class User extends Authenticatable

Now we will create views in Resources/view/welcome.blade.php

You might also like