Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

I need help with this homework assignment. I have to use bootstrap for this and

ID: 3889806 • Letter: I

Question

I need help with this homework assignment. I have to use bootstrap for this and never tried before. I am going to provide the code I had from my previous assignment which they want me to use in the form of bootstrap. If possible can you help lay out based from a bootstrap framework what I need to put where? Thanks.

<!DOCTYPE html>
<html>
    <head>
    <style>
        h1 {
            color: green;
                text-align: center;
     }
        .mystyle {
            color: #ffcc99;
            font-size:19px;
        }
      
        h2 {
            color:aqua;
                font-size:22px;
        }
        h3 {
            color: maroon;
                font-size: 22px;
        }
      
        h4 {
            color: olive;
            font-size; 22px;
        }
        </style>
    </head>
  
    <body>
      
        <h1>Welcome :)</h1>
        <img src="images/photo.jpg"
             height="420" width="420">
       <div class=mystyle> Hello and welcome to my page. My name is Stephen.
           <h2>Interests</h2>
        My interests are beatboxing (which is making music with my mouth essentially). I also enjoy messing with different kinds of hardware wanting to know what makes it tick and not tick.
           <h3>Major</h3>
         
        My major is computer engineering. I have chosen this major over computer science since I am interested in exploring all parts of the computer sciences to grasp every concept that will help me further my knowledge in the future.
           <h4>Infinite Funds</h4>
      
           If money was not an issue.. I would love to be able to help the needy around the globe by providing them not only the necessities of clean water, food, and shelter..but also access to a more wired network which is shown to be more and more important each day. A fully fiber optic network which will help them connect with friends and family easier and a greater knowledge of the world not possible otherwise.
        </div>
        </body>
</html>

New .Design a box-based layout of your web-page by hand (pen and paper). Identify the number of rows you need and the number of columns that you will need on this design. Take a picture. Call this image mockupimage.jpg (convert the image format to jpg if you have to) and place this image in the images folder [2 points] In this assignment you will create a webpage layout framework based on 12 grid-columns as described in the class. The style definitions used for generation of this framework will be stored under your public html/hw2/css directory of your lamp account. [2 points] Reorganize your code of your web-page using the framework you defined above. o There should be at least three rows [1 point] o There should be at least one row with multiple columns [1 point] o There should be at least one image contained in a column smaller than or equal to 6 grid-columns. [1 point] You should continue to use at least two different. colors [0.5 point] You should change the fonts of the entire page.[1 point] You should use at least three different styles for content on your page. [0.5 point] Website directory structure should be according to what was discussed in the class. [1 point] (images, css directories etc) .Bonus: Your design should be responsive so that it looks nice both on large screen and cell phones. [2 points

Explanation / Answer

for begining with the bootstrap you need to download the bootstrap development SDK it will consist of files those file will in folder like

Js, CSS and Font if you want to add a responsive layout to the html page we need to save the html file and put in the folder of the bootstrap where all the js and css files are present now we need to customize the code in the index.html we will call the index.html file with the resource of the css file and the js file for the responsive layout.

to add the code for the boot strap in your code ,we need to insert the head code from the boot strap sdk file

include in the head region only in the html file

<!DOCTYPE html>
<html>
    <head>

<meta name="viewport" content="width=device-width, initial-scale=1"> // this is used to import the meta tags containing the bootstrap

<link href="css/bootstrap.min.css" rel = "stylesheet">// this will access the style sheet from the css folder
    <style>
        h1 {
            color: green;
                text-align: center;
     }
        .mystyle {
            color: #ffcc99;
            font-size:19px;
        }
      
        h2 {
            color:aqua;
                font-size:22px;
        }
        h3 {
            color: maroon;
                font-size: 22px;
        }
      
        h4 {
            color: olive;
            font-size; 22px;
        }
        </style>
    </head>
  
    <body>
      
        <h1>Welcome :)</h1>
        <img src="images/photo.jpg"
             height="420" width="420">
       <div class=mystyle> Hello and welcome to my page. My name is Stephen.
           <h2>Interests</h2>
        My interests are beatboxing (which is making music with my mouth essentially). I also enjoy messing with different kinds of hardware wanting to know what makes it tick and not tick.
           <h3>Major</h3>
         
        My major is computer engineering. I have chosen this major over computer science since I am interested in exploring all parts of the computer sciences to grasp every concept that will help me further my knowledge in the future.
           <h4>Infinite Funds</h4>
      
           If money was not an issue.. I would love to be able to help the needy around the globe by providing them not only the necessities of clean water, food, and shelter..but also access to a more wired network which is shown to be more and more important each day. A fully fiber optic network which will help them connect with friends and family easier and a greater knowledge of the world not possible otherwise.
        </div>
        </body>
</html>

this file must be place in the bootstrap folder if you want to access from outside the folder the path of the folder must be given correctly.