Designs Responsive Websites | Works On All Devices

Bootstrap Resizing the Page in Real Time using Locally Hosted Web Server in Visual Studio 2017

Bootstrap is a programming language that allows websites to be fully responsive and scale to different sizes. It uses classes and IDs to assign a custom CSS styling to only it specifically which allows the code to scale down using a grid system. Bootstrap is the most widely used method of responsive design. It is easy to learn and simple to implement code that allows a website designer | developer to create sites that work on all screen resolutions and aspect ratios.

The CSS classes all have special names that allow the content to automatically resize according to the display width. So, let’s say I have a device that is a smartphone has a screen that is 480 pixels wide. But, my PC has a 1920 pixels wide. I want to design the site to automatically scale based on the width of the display I’m using.

I would use code like this to get the above effect…

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<div class="container-fluid">
            <h1>Hello World!</h1>
            <p>Resize the browser window to see the effect.</p>
            <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
            <div class="row" style=" box-shadow: 4px 4px 8px rgb(64,64,64);">
                <div class="col-sm-4" style="background-color:lavender; text-align: center; font-size: 1.5em; padding: 20px;text-shadow: 1px 1px 1px black; color: rgb(64,64,64);">Hi!</div>
                <div class="col-sm-4" style="background-color:lavenderblush; text-align: center; font-size: 1.5em; padding: 20px;text-shadow: 1px 1px 1px black; color: rgb(64,64,64);">What's Up?</div>
                <div class="col-sm-4" style="background-color:lavender; text-align: center; font-size: 1.5em; padding: 20px; text-shadow: 1px 1px 1px black; color: rgb(64,64,64);">How's It Going?</div>
</div>
</div>
</html>

This code allows the column to auto-align based on screen size. Basically, the “col-sm-4” class name indicates to the Bootstrap code to stack the elements in a line from top to bottom when the screen width is less the 768 pixels. When it is greater than 768 pixels, it will display at the full width. This works because the “col-sm-4” class name is literally a reference to a particular Bootstrap code that allows this stacking to work. So, when using this class name, the Bootstrap code is referenced from the website in the code on the top of the page. I copied it down below so you can see it:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

So, in order for any of the Bootstrap class names to work, you need these two references in the Header section. Otherwise, the code will not be Bootstrap and it will be basic HTML. Basic HTML does not provide this scaling functionality.

I can provide you with Bootstrap designs and websites so if you need one using code like this. Contact Me!


Daniel Serrano

I'm a hard working, fun loving and cool guy who's heavily into my job and it's related fields. I love creating great sites and designs and pleasing customers and life is always changing. I find the best way to keep up to the speed of life and its changes is to always have many plans for the future, and if you get knocked down, no worries, hard work can lead to miracles... Never Give Up!