Bootstrap Tutorial for SharePoint Developers step by step

by

Are you a beginner in bootstrap? Through this bootstrap tutorial for SharePoint developers step by step, we will see everything to start bootstrap. Here we will discuss:

  • What is bootstrap?
  • (Why bootstrap) Advantages of using bootstrap
  • Browsers supported in Bootstrap
  • Download and Install bootstrap
  • How to use bootstrap?
  • Create a form using bootstrap
  • Bootstrap premium themes

What is bootstrap?

Nowadays, any website you design should be responsive in design. This is the trend and we should always focus on responsive design. Most of the web sites people open using in mobile devices. So when you develop a website it should appear perfectly on laptops, desktops, tablets, or mobile devices.

What is bootstrap? Bootstrap is one of the popular and largely used HTML, CSS, and JS framework that we can use to develop responsive web sites or mobile-first web sites.

Why Bootstrap?

Let us see why bootstrap? or what are the advantages of using bootstrap?

  • Bootstrap is easy to use, someone having a little knowledge of HTML and CSS can easily use bootstrap.
  • Bootstrap is fully responsive. The web page will appear correctly on smartphones, tablets, or desktops, and laptops.
  • Another advantage of bootstrap is it supports all modern browsers like Google Chrome, Mozilla Firefox, Microsoft Internet Explorer, Microsoft Edge, Safari, and Opera.
  • While designing any web pages, we required to divide the pages into grids. Bootstrap provides responsive grids that we can use easily. Easily we can create 2 columns layout, a three-column layout, three unequal columns layout, or even we can easily design a full-width single-column layout, etc.
  • Bootstrap also provides default responsive image options. It will resize the images based on the device or based on the screen size.
  • In bootstrap, we can easily create useful real-time functionalities by using various bootstrap components. Few bootstrap components are Alerts, Breadcrumb, buttons, Carousel, Dropdowns, Forms, Navbar, Pagination.
  • Bootstrap is open source. So if you face any issues or challenges, then you can get help from the bootstrap community members. You can even use bootstrap StackOverflow forums. Apart from this, as a bootstrap developer, you can also contribute your code to GitHub.
  • We can also buy various premium bootstrap templates and use them in your organization. There are a number of providers selling useful templates. Apart from this, you can also check the bootstrap official premium themes.

Supported browsers in Bootstrap

Bootstrap supports mostly all the morden browsers like IE, Chrome, Firefox, Safari, Opera, etc.

Browsers supported in Mobile Devices

Below are the browsers supported in the Android, iOS and Windows 10 Mobile devices:

Android:

  • Chrome
  • Firefox
  • Android Browser & WebView
  • Microsoft Edge

iOS:

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Windows 10 Mobile:

  • Microsoft Edge

Browsers supported in Desktop

Let us check out the desktop browsers supported in Mac and Windows:

Mac:

  • Chrome
  • Firefox
  • Microsoft Edge
  • Opera
  • Safari

Windows:

  • Internet Explorer (10+)
  • Chrome
  • Firefox
  • Microsoft Edge
  • Opera

These are the supported browsers in bootstrap.

Download and Install bootstrap

Now, let us see how we can download and install bootstrap.

There are different ways we can download and use bootstrap.

We can download the compiled version of CSS and JS required for bootstrap and we can use it.

Apart from that, bootstrap also allows you to download the source files, that you can download, modify, and use it.

Apart from this you can also provide the js and css file path from jsDelivr CDN path like below:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Note: If you want to use popper.js separately, then you should add it before the bootstrap.min.js file like below.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

Apart from this, we can also install bootstrap through the various package manager. Follow the below commands:

npm:

From npm, install bootstrap by running the following command:

npm install bootstrap

yarn:

We can install bootstrap from yarn by running the below command:

yarn add bootstrap

RubyGems:

If you are working with Ruby apps, then you can use the below command to install bootstrap from RubyGems.

gem 'bootstrap', '~> 4.5.3'

or

gem install bootstrap -v 4.5.3

Composer:

From Composer, run the below command to install bootstrap.

composer require twbs/bootstrap:4.5.3

NuGet:

If you are working in .Net applications and want to use bootstrap, then you can install bootstrap from NuGet package manager like below:

Install-Package bootstrap
Install-Package bootstrap.sass

How to use bootstrap

Let us see how we can use bootstrap in a simple html file.

To work with bootstrap, we need to refer the below files inside our html file.

  • bootstrap.min.js
  • bootstrap.min.css

In the HTML file, you can refer both the files like below:

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Create your first form using bootstrap

Let us see how to create your first form using bootstrap.

This is a simple HTML file and we have use various bootstrap controls like:

  • Textbox
  • Multiline textbox
  • radio button
  • checkbox
  • Dropdown list
  • Multi-Select box
  • Date picker
  • Button etc.

We have also used JavaScript to get the values from the controls and display in an alert box.

Below is the complete code. You can use Visual studio code to create your html file.

<!DOCTYPE html>
<html>
    <head>
        <title> Product Details </title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <script>
        function getInputValue(){

        //This is get the value of select Product.

        var Products = lblProduct.value;
        alert(Products);
      // This is  get the value of Product Name.
       alert(document.getElementById("pdName").value);
       
      //This is get the value of Product Description.
       alert(document.getElementById("lprDescription").value);

  
       // This  is   get the value of quantity Number.
       var quantities = lblQuantity.value;
       alert(quantities);

       // This is get the value of Pass code
       alert(document.getElementById("pdrCode").value);
        
       // This is get the value of Select Country.
       var countries = document.getElementsByName("chkCountry");
        
       var selectedContries = "";
       var count;
       for (count = 0; count < countries.length; count++)
           {
             if (countries[count].checked)
               {
                selectedContries = selectedContries + countries[count].value + " ;";
               }
           }
        selectedContries = selectedContries . substring ( 0, selectedContries.length - 1);
        alert(selectedContries);

        // This is get the value of yes or no.
         var allitems = document.getElementsByName('rdStock');
         for(i = 0; i < allitems.length; i++)
            {
             if(allitems[i].checked)               
             {
               alert(allitems[i].value);
                       
             }
            }
            //This is get the value of Date.
            alert(document.getElementById("avlDate").value )  ;

            //This is get the value of selectd brand Name.
            var brands = pdpBrand.value;
            alert(brands);

            // This is get the value of Similar Products.
            var selectedProducts = "";
            var k = 0;
            for(k=0; k< lblList.length;k++)
               {
                if(lblList[k].selected)
                {
                selectedProducts = selectedProducts + lblList[k].value + ",";
                }
              }
            selectedProducts = selectedProducts . substring ( 0, selectedProducts.length - 1);
            alert(selectedProducts);
            }
    </script>
    <body>
        <div class="container">
            <h2>Product Details:</h2>
            <form>
                <div class="form-group">
                <label for="lblProduct">Select Product:</label>
                <select class="form-control" id="lblProduct">
                    <option> Laptop     </option>
                    <option> Desktop    </option>
                    <option> Smartphone </option>
                    <option> Smart TV   </option>
                    <option> Headphone  </option>
                </select>
            </div>
            <div class="form-group">
                <label for="pdName"> Product Name: </label>
                <input type="text" class="form-control" id="pdName" placeholder="Name">
            </div>
            <div class="form-group">
                <label for="ldrDescription"> Product Description: </label>
                <textarea class="form-control" rows="4" id="lprDescription">

                </textarea>
            </div>
            <div class="form-group">
                <label for="lblQuantity"> Quantity: </label>
                <select class="form-control" id="lblQuantity">
                    <option> 1 </option>
                    <option> 2 </option>
                    <option> 3 </option>
                    <option> 4 </option>
                    <option> 5 </option>
                </select>
            </div>
            <div class="form-group">
                <label for="pdrCode"> Pass Code: </label>
                <input type="password" class="form-control" id="pdrCode" placeholder="code">
            </div>
           
                <div class="form-group">
                     
                     <label> Available in Country: </label>
                     <input type="checkbox" name="chkCountry" value="India">India 
                     <input type="checkbox" name="chkCountry" value="USA">USA 
                     <input type="checkbox" name="chkCountry" value="SRI">SRI 
                     <input type="checkbox" name="chkCountry" value="UK">UK 
                    
                 </div>
                 <div class="form-group">
                    <div id="result"></div>
                    <label for="stock"> Is in Stock: </label>
                    <input type="radio" name="rdStock" value="yes">yes
                        <input type="radio" name="rdStock" value="no">no
                </div>
                 <div class="form-group">
                     <label for="avlDate"> Available Date: </label>
                     <input type="date" id="avlDate">
                 </div>
                
                    <div class="form-group">
                        <label for="pdpBrand"> Brand:</label>
                        <select class="form-control" id="pdpBrand">
                            <option> Apple       </option>
                            <option> Samsung     </option>
                            <option> Nokia       </option>
                            <option> Plantronics </option>
                            <option> Dell        </option>
                            <option> Panasonic   </option>
                            <option> Microsoft   </option>
                            
                        </select>
            </div>
            <div class="form-group">
                <label for="lblList">  Similar Products:  </label>   
                <select multiple class="form-control" id="lblList">
                    <option> TV          </option>
                    <option> Mobile     </option>
                    <option> Microphone </option>
                    <option> Mouse      </option>
                    <option> Charger    </option>
                </select>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-primary" onclick="getInputValue();"> Add to cart </button>
                </div>                       
                </div>
            </form>
           
        </div>
    </body>
</html>

Once you save the file and open in browser, the form will appear like below:

Bootstrap tutorial for beginners step by step
Bootstrap tutorial for beginners step by step

Download bootstrap premium themes

Bootstrap provides a set of premium themes that you can use, but of course, there is a small cost associated with this. You can download and use these bootstrap premium themes if you are thinking it will best suitable for your websites.

You may like the following tutorials:

I hope this step by step Bootstrap tutorial for beginners will help you to learn bootstrap. We check the below things:

  • What is bootstrap?
  • Why Bootstrap?
  • Supported browsers in Bootstrap
  • Browsers supported in Mobile Devices
  • Browsers supported in Desktop
  • Download and Install bootstrap
  • How to use bootstrap
  • Create your first form using bootstrap
  • bootstrap studio tutorial for beginners step by step
  • bootstrap tutorial for beginners step by step

  • bootstrap is fast and secure CSS file which use for to make websites easy and do not any need to write a code manually.

    Reply
    • >