Php MySQL

Build responsive, Mobile-Friendly Web Pages by using Bootstrap make website responsive

Bootstrap is the framework used to create responsive websites. In this post we are going to discuss the usage and function of Bootstrap in detail. HTML, CSS, Javascript etc famous programming languages are using  to create a Responsive websites. The web pages created by Bootstrap are Mobile Friendly, that means when you open this website in a desktop, it will open as a desktop website and when you open it in mobile it looks like mobile website. In Bootstrap, you can create Response image, Responsive tables, buttons, and many more.

The bootstrap was developed by x and y. Bootstrap was primarily used to create Twitter but it was made public and now Bootstrap is an open source programming language and anybody can now use Bootstrap.

 

Get Start Bootstrap

To use Bootstrap, we have to download it. Here you have two options, either by downloading the Bootstrap or by using Bootstrap’s CDN. Here I will tell you about both of them. Let’s start.

Download Complete Css CDN file :

    https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css
HTML CDM
 
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=”anonymous”>

[1]. Download Bootstrap

To download Bootstrap, first of all, we have to go to its official website, which is given below.

 

 

Here you have to download it by clicking on the download button. After this, you have to setup the CSS and Javascript files you have received with this downloaded file in your project, for this, copy the css and js folder from here and go to the directory of your project and paste it.
After this you will have to link the .css and .js files to your website, for this, paste the following code between the header section.

Paste This Code between <head>…..</head>
 <!——->
 <meta name=”viewport” content=”width=device-width, initial-scale=1″>

 <!——->
 <link rel=”stylesheet” href=”css/bootstrap.min.css”>

 <!——->
<script src=”jquery.min.js”></script> 
<!——->
<script src=”bootstrap.min.js”></script>

After linking to your website, we now check that the Bootstrap is working properly. For this you create a new page and paste the code below there and save it and open it. If you see this as an image below, then your Bootstrap is working properly or else check your link and file again and try again.

Create a new Page and Paste This Code For Testing

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

 

[2]. Another way to use Bootstrap is to use its CDN.

When you go to the official website of Bootstrap, you will see some links. This is CDNs, copy them from here and paste them into the header section of your website.

Add Bootstrap CDN between <head>….</head>
<!——->
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<!——->
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” integrity=”sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=”anonymous”></script>

<!——->
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=”sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=”anonymous”>

<!——->
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js” integrity=”sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy” crossorigin=”anonymous”></script>

<!——->
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

 

The advantage of using bootstrap’s CND is that you do not have to download Bootstrap, but if you use the bootstrap’s CDN then you have to use the Internet to use Bootstrap

NOTE: What is Lorem Ipsum?Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 

Benifits to use Bootstrap

As I mentioned to you earlier, through bootstrap, we can create a RESPONSIVE website, but there are many advantages of using Bootstrap. First, your website looks clean and user-friendly. Secondly, your website becomes SEO friendly so you can use Bootstrap should do.

Kamal

My name is Kamalesh saini , working as e-mitra operator and web developer too. i am here to guide people who need help in learning php MySQL, HTML,CSS, and javascript.

Add comment

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.