I am explaing you how to add Bootstrap to a core PHP website. it involves including the necessary Bootstrap files in project and Bootstrap classes to style your HTML elements. Here’s some small step-by-step guide:
1. Download Bootstrap library
Firstly we need to download Bootstrap from the official Bootstrap website (https://getbootstrap.com/). we can choose to download the compiled CSS and JavaScript files or use a content delivery network (CDN) for faster loading.
2. Include Bootstrap Files
After, downloaded files we need to extract the Bootstrap files. we need to Copy the bootstrap.min.css and located in the css folder to a suitable location within your project . after that we need to copy the bootstrap.min.js and jquery.min.js files located in the js folder to a suitable location in your project such as a js folder.
3. Link Bootstrap JS/CSS in HTML
In your project PHP file(s), you need to link the Bootstrap files in the HTML head section.
<!DOCTYPE html>
<html>
<head>
<title>webdeveloperindia.in</title>
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Include Bootstrap JS (Optional, for components that require JavaScript) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
</head>
<body>
<!-- Your PHP content here -->
<h3 class="text-center">This is webdeveloperindia.in website adding bootstrap in custom PHP page.</h3>
</body>
</html>
4. Use Bootstrap Classes
Below Bootstrap classes I am adding in body section of website to check boostrap things. it is Bootstrap button classes.
<h3 class="text-center">This is webdeveloperindia.in website adding bootstrap in custom PHP page.</h3>
<div class="container text-center">
<div class="mt-3">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
</div>
</div>
complete code
<!DOCTYPE html>
<html>
<head>
<title>webdeveloperindia.in</title>
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Include Bootstrap JS (Optional, for components that require JavaScript) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
</head>
<body>
<!-- Your PHP content here -->
<h3 class="text-center">This is webdeveloperindia.in website adding bootstrap in custom PHP page.</h3>
<div class="container text-center">
<div class="mt-3">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
</div>
</div>
</body>
</html>
Output :
Hello, Welcome to webdeveloperindia.in. I am a full-stack web developer. Email – [email protected] | Skype – azaruddin23. I have knowledge of PHP, Laravel, Magento 1/2, Codeigniter, WordPress, Joomla, Shopify, Git, Bitbuket, jQuery, Ajax, Javascript and ReactJS.