A Complete Course on Bootstrap4 in W3School

here is the link:

<!DOCTYPE html>
<html>
<head>
<!-- <style> -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>test title</title>   
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
<!-- <link rel="stylesheet" href="static/css/styletest.css" type="text/css" /> -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> -->
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> -->
<!-- </style> -->
</head>

<body>
<br>
<!-- Grey with black text -->
<!-- <nav class="navbar navbar-expand-sm bg-white navbar-light"> -->
<!-- Black with white text -->
<!-- <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> -->
<!-- Blue with white text -->
<!-- <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> 
<div class="container-sm">.container-sm</div> <576px
<div class="container-md">.container-md</div> >=768px
<div class="container-lg">.container-lg</div> >=992px
<div class="container-xl">.container-xl</div> >=1200px
 to create a simple horizontal menu, add the .nav class to a <ul> element, followed by .nav-item for each <li> and add the .nav-link class to their links, Add the .justify-content-center class to center the nav, and the .justify-content-end class to right-align the nav
 Add the .flex-column class to create a vertical nav
 Turn the nav menu into navigation tabs with the .nav-tabs class. Add the .active class to the active/current link--> 

<nav class="navbar navbar-dark bg-primary text-white justify-content-between"></nav>

    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </nav>
<hr>
<!-- <div class="container pt-3"> padding of 16 pixels
    <div class="container p-3 my-3 border"></div>
<div class="container p-3 my-3 bg-dark text-white"></div>
<div class="container p-3 my-3 bg-primary text-white"></div> -->
<!-- <div class="container-fluid"> -->
<div class="container">

    <h2>Toggleable Tabs</h2>
    <br>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
        </li>
    </ul>

<!-- Tab panes -->
<div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
    <h3>HOME</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
    <h3>Menu 1</h3>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
    <h3>Menu 2</h3>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
</div>
</div>

<!-- Lists -->
<div class="container">
<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>
<ol>
    <li> item a </li>
    <li> item b </li>
    <li> item c </li>
</ol>
</div>
<hr>

<div class="container">
    <nav class="jumbotron text-center">
        <h2>test other class</h2>
    </nav>
</div>

<!-- TABLES -->
<div class="container">
    <table class="table table-striped table-bordered table-hover table-condensed">
    <!-- <table class = ".table-stripped 
    .table-bordered
    .table-hover
    .table-dark 
    .table-borderless
    .table-primary
    .table-success
    .table-danger
    .thead-dark
    .thead-light
    .table-sm
    .table-lg
    .table-responsive
    .table-responsive-sm
    ">-->    
        <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        </tr>
        <tr class="danger">
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
        </tr>
        <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>24</td>
        </tr>
        <tr class="success">
        <td>John</td>
        <td>Doe</td>
        <td>34</td>
        </tr>
        <tr>
        <td>Stephanie</td>
        <td>Landon</td>
        <td>47</td>
        </tr>
        <tr>
        <td>Mike</td>
        <td>Johnson</td>
        <td>19</td>
        </tr>
    </table>

    <!-- Forms 
    All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.
    form-group
    form-control having a width of 100%
    form-inline
    form-check
    form-check-lable
    form-check-input

    Add a wrapper element with .form-group, around each form control, to ensure proper margins-->
    
<form action="process.php" method="POST">
    <div class="container">
        <h2>Form Grid</h2>
        <p>Create two form elements that appear side by side with .row and .col:</p>
        <form action="/action_page.php">
          <div class="row">
            <div class="col">
              <input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
            </div>
            <div class="col">
              <input type="password" class="form-control" placeholder="Enter password" name="pswd">
            </div>
          </div>
          <button type="submit" class="btn btn-primary mt-3">Submit</button>
        </form>
    </div>
    <pr>
    <div class="container">
        <div class="row">
            <div class="col"
            <label>First Name</label>
            <input type="text" class="form-control" name="firstName" placeholder="Enter first name">
            </div>
    
            <div class="col">
            <label>Last Name</label>
            <input type="text" name="lastName" class="form-control">
            </div>
        </div>
        <br>
        <div class="form-group">
            <label>Email</label>
            <input type="email" name="email" class="form-control">
        </div>
        <br>
        <div class="form-group">
            <label>Message</label>
            <textarea name="message" class="form-control"></textarea>
        </div>
        <br>
        <div class="form-group">
            <label>Gender</label>
            <select name="gender" class="form-control">
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
            </select>
        </div>
        <br>
        <div class="form-group">
            <label>Age:</label>
            <input type="number" name="age" value="30" class="form-control">
        </div>
        <br>
        <div class="form-group">
            <label>Birthday:</label>
            <input type="date" name="birthday" class="form-control">
        </div>
        <br>
        <div class="form-group">
            <input type="submit" name="submit" value="Submit" class="form-control">
        </div>
    </div>
</form>
<pr>

<form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="test_file" class="mr-sm-2">Enter Test File<span class="text-red">*</span></label>
            <input type="text" class="form-control mb-2 mr-sm-2" id="test" name="test" style="height: 44px;">
            {% if error_dict %}
            <span class="text-red">{{error_dict.error_message}}</span>
            {% endif %}

        </div>
        <div class="form-group col-md-4">
            <label for="benchmark" class="mr-sm-2">Enter Benchmark<span class="text-red">*</span></label>
            <input type="text" class="form-control mb-2 mr-sm-2" id="bm" name="bm" style="height: 44px;">
            {% if error_dict %}
            <span class="text-red">{{error_dict.error_message}}</span>
            {% endif %}
        </div>
        <div class="form-group col-md-4">
            <label for="frequency" class="mr-sm-2">Enter Frequency<span class="text-red">*</span></label>
            <input type="text" class="form-control mb-2 mr-sm-2" id="freq" name="freq" style="height: 44px;">
            {% if error_dict %}
            <span class="text-red">{{error_dict.error_message}}</span>
            {% endif %}
        </div>                                    
        <div class="form-group col-md-4">
            <label for="startdate" class="mr-sm-2">Enter Startdate<span class="text-red">*</span></label>
            <input type="text" class="form-control mb-2 mr-sm-2" id="sd" name="sd" style="height: 44px;">
            {% if error_dict %}
            <span class="text-red">{{error_dict.error_message}}</span>
            {% endif %}
        </div>
        <div class="form-group col-md-4">
            <label for="enddate" class="mr-sm-2">Enter Enddate<span class="text-red">*</span></label>
            <input type="text" class="form-control mb-2 mr-sm-2" id="ed" name="ed" style="height: 44px;">
            {% if error_dict %}
            <span class="text-red">{{error_dict.error_message}}</span>
            {% endif %}
        </div>
        <div class="form-group col-md-4">
            <button type="submit" class="btn btn-success m-t-35">Submit</button>
        </div>
</form>
		<!-- Button -->
		<button>Click Me</button>
        <!-- <button type="button" class="btn">Basic</button> 
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-dark">Dark</button>
        <button type="button" class="btn btn-light">Light</button>
        <button type="button" class="btn btn-link">Link</button>
        button can be placed in three ways, on <a>, <button>, or <input> elements
        <a href="#" class="btn btn-info" role="button">Link Button</a>
        <button type="button" class="btn btn-info">Button</button>
        <input type="button" class="btn btn-info" value="Input Button">
        <input type="submit" class="btn btn-info" value="Submit Button">
        There can be badges too
        <h1>Example heading <span class="badge badge-secondary">New</span></h1>
        <h2>Example heading <span class="badge badge-secondary">New</span></h2>
        <h3>Example heading <span class="badge badge-secondary">New</span></h3>
        <h4>Example heading <span class="badge badge-secondary">New</span></h4>
        <h5>Example heading <span class="badge badge-secondary">New</span></h5>
        <h6>Example heading <span class="badge badge-secondary">New</span></h6>-->
        
        <div class="container">
            <h2>Badge inside a Button</h2>
            <button type="button" class="btn btn-primary">
              Messages <span class="badge badge-light">4</span>
            </button>
            <button type="button" class="btn btn-danger">
              Notifications <span class="badge badge-light">7</span>
            </button>
          </div>
		<br>

        test1&nbsp;|&nbsp;test2&nbsp;&nbsp;|&nbsp;&nbsp;test3
        <pre>
            test1

            test2

            test3
        </pre>
        <p>


        </p>
        <br>
        <pr>


        <!-- Image -->
            <!-- <img href="gsm-197-tsunami_by_Hosusai_19th_century.jpg" alt="my pic" width="420" height="420"> -->
			<img src="./staticfiles/gsm-197-tsunami_by_Hosusai_19th_century.jpg" alt="my pic" width="420" height="420">

		<!-- Quotations -->
		<blockquote cite="http://traversymedia.com">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</blockquote>

		<p>The <abbr title="World Wide Web">WWW</abbr> is awesome</p>

		<p><cite>HTML crash course</cite> by Brad Traversy</p>

		<div style="margin-top:500px"></div>

</div>
</body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.