Scribd Logo
Upload

Welcome to Scribd!

  • Experiment 1.1

    Uploaded by

    Rohit Rohilla
    5 views7 pages
    Rohit conducted an experiment to create a simple web page displaying his name, UID, and Gmail using Bootstrap classes. He used Bootstrap's grid system and various text, background color, and padding classes to lay out the content in columns. Rohit displayed his UID, name, and email each in their own column. He learned to use Bootstrap's classes to style elements and lay out the web page.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Rohit conducted an experiment to create a simple web page displaying his name, UID, and Gmail using Bootstrap classes. He used Bootstrap's grid system and various text, background color, and padding classes to lay out the content in columns. Rohit displayed his UID, name, and email each in their own column. He learned to use Bootstrap's classes to style elements and lay out the web page.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views7 pages

    Experiment 1.1

    Uploaded by

    Rohit Rohilla
    Rohit conducted an experiment to create a simple web page displaying his name, UID, and Gmail using Bootstrap classes. He used Bootstrap's grid system and various text, background color, and padding classes to lay out the content in columns. Rohit displayed his UID, name, and email each in their own column. He learned to use Bootstrap's classes to style elements and lay out the web page.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    Experiment 1

    Student Name: Rohit UID:20bca1150


    Branch: BCA Section/Group:6
    Semester: 5th Date of Performance:8/9/2022
    Subject Name:Web Technologies Lab Subject Code:20-CAP-315

    1. Aim/Overview of the practical:

    Create a simple web page to display name, uid, gmail using boostrap.

    2. Task to be done:

    Display UID,Name,Gmail using bootstrap 5 classes

    3. Concept used:
    1. In this experiment we are added online (CDN) bootstrap rather than offline
    boostrap.
    <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-


    ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    2. Use bootstrap classes to implement bootstrap css.

    4. Steps/Commands involved to perform practical:



     1. HTML’s CSS:-
    1. Set font -style to cursive for all body element

    <body style="font-family: cursive;">


    2. Bootstrap CSS:-
    a)
    <h2 class="text-center p-4 text-info  "><strong>Experiment 1</strong></h2>

    In this line I am using three classes(text-center, p-4, text-info)


    i. text-center class is used to set the text to center position
    ii. P-4 class is used to set the padding (0.25*4)
    iii. Text-info is used to set the color of info to blue
    There is also a strong tag this tag is used to set the text to bold and gives a
    strong text look.
    Output of the line:-

    b)
    <div class=" container-fluid row md-4">

            <div class="col-sm-4"  >

                <h2 class="bg-info  p-5 text-center text-white">UID</h2>

                <h2 class="bg-warning p-5 text-center text-dark" >20bca1150</h3>

    </div>

    From here div tag started div tag is used to create a container.In this div tag
    there is two classes (container-fluid,row md-4).
    a. Container-fluid class is used to provide a full width container.
    b. Row md-4 tells us that the container is behave likes row md is used to
    define the grid md means the screen size is defaulty sets to tablet
    mode
    c. After the parent tag we also declaring here another div tag which work
    like a column in parent row . and here is also an another sm class
    which is used to set the screen size to phone screen mode
    d.
    H2 tag:- In this tag there is 4 classes(bg-info p-5 text-center text-dark)
    a) Bg-info class is used to set the blue background to this element

    b) P-5 class is used to set the padding in this -5 is used to give user
    defined padding size(.25*5)
    c) Text-center class is used to set the text to center according to div col
    class tag.
    d) Text-dark class is used to set the font color to light grey

    e) Bg-warning is used to set background color to warning it represent the


    warning sign
    f) Text-white is used to set the font colour to white

    Output of above lines code:-


            <div class="col-sm-4">

                <h2 class="bg-danger  p-5 text-center text-light">Name</h2>

                <h2 class="bg-success  p-5 text-center text-white">Rohit</h3>

            </div>

    This is our 2nd column in which we are trying to add our name

    Here we creating an another columns using div container tag in which we define col
    and sm-4 class. Col class is used to represent the div tag as a column and sm-4 is
    for small size screens its size set to sm-4

    H2 tag:-in h2 tag we using 5 classes(bg-danger,bg-success, p-5, text-center, text-


    light)

    a) Bg-danger class is used to background color to red it represent danger sign.

    b) Bg-success class is used to set background color to green it represent success sign.

    c) P-5 is used to set the padding


    d) Text-center is used to set the text to center according to div container

    e) Text-light is used to set the white color it is slightly more brighter than white color

    Output of above lines code:-

            <div class="col-sm-4">

                <h2 class="bg-secondary  p-5 text-center text-white">Gmail</h2>

                <h2 class="bg-dark p-5 text-center text-light">20bca1150@cuchd.in</h3>        

            </div>

    5. This is the 3rd div tag in which we represent our gmail


    In this we are using 5 classes(bg-secondary, bg-dark,text-center,text-white,text-
    light,p-5).
    a. Bg-secondary class is used to the background text to light gray.
    b. All the other classes we discuss already in above topics.

    In this also we are using the same classes that we are using same as above
    Output of above lines code:-

    6. Result/Output/Writing Summary:
    Learning outcomes (What I have learnt):

    1. We learn multiple classes in into boostrap.

    2.We learn to use of container class

    3.We learn how to use online bootsrap.

    Evaluation Grid:

    Sr. No. Parameters Marks Obtained Maximum Marks


    1. Worksheet 10
    2. Demonstration/Performance /Pre 5
    Lab Quiz
    3. Post Lab Quiz 5

    You might also like