View video tutorial

BOOTSTRAP5 Helper Classes

BOOTSTRAP5

To learn Oracle you need to practice by hand. So now we need to install the database software on a computer, and execute SQL statements.

Update in progress and will be completed shortly.

Thanks for being with us.

Database System


A database is an collection of organized and structural data, or information, usually stored electronically on a computer system.

DBMS is a software system, Where a database is controlled by a DBMS.

A software application system consisting of data and DBMS is usually called database system, or simply database.

Oracle, MySQL, PostgreSQL, SQL Server, MS Access are all commercial databases.

Learn Java

Practice with examples "Try it Now"

You can practice the Oracle command in your machine by following examples.

To see the output for every example click "Try it Now"

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.


Sample Code

Copy each file contents and paste it to your own project and run to see the final output

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Accordion</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="accordion" id="myAccordion">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne"> Accordion Item #1</button>									
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
                <div class="card-body">
                    <p>Cras a mi diam. Cras elementum ante accumsan consectetur lacinia. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque viverra ultrices neque, sed dapibus elit venenatis quis.</p>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
                <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">Accordion Item #2</button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
                <div class="card-body">
                    <p>Ut tristique ornare ex id egestas. Nulla sollicitudin, arcu a commodo malesuada, dui metus semper magna, in facilisis nisl nisl sit amet arcu. Nullam placerat felis ut ante cursus vulputate. Cras quis massa gravida, scelerisque felis eu, rhoncus felis. Vestibulum porttitor nisl non libero iaculis.</p>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingThree">
                <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree">Accordion Item #3</button>                     
            </h2>
            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
                <div class="card-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum vel dolor vel sollicitudin. Vivamus convallis, dui vel pulvinar suscipit, tortor sapien mollis mi, non consectetur velit eros sed purus.</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.