Dashboard with Bootstrap

Here's an example of a simple dashboard layout using Bootstrap. You can use this code as a starting point and customize it further to fit your specific needs.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <!-- Custom CSS -->
    <style>
        /* Custom styles for the dashboard */
        .dashboard {
            padding: 20px;
        }

        .widget {
            background-color: #f8f9fa;
            padding: 20px;
            margin-bottom: 20px;
        }

        .widget-title {
            font-weight: bold;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="container dashboard">
    <div class="row">
        <div class="col-md-6">
            <div class="widget">
                <h3 class="widget-title">Widget 1</h3>
                <p>Content for Widget 1 goes here...</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="widget">
                <h3 class="widget-title">Widget 2</h3>
                <p>Content for Widget 2 goes here...</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="widget">
                <h3 class="widget-title">Widget 3</h3>
                <p>Content for Widget 3 goes here...</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="widget">
                <h3 class="widget-title">Widget 4</h3>
                <p>Content for Widget 4 goes here...</p>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

In this example, we have a simple dashboard layout with four widgets. Each widget is represented by a `div` element with the class `widget`. The widgets are organized into two columns using the Bootstrap grid system (`col-md-6`), with two widgets in each row.

The widgets have a title (`widget-title`) and some content (`<p>` tag) inside them. You can customize the content and styling of each widget as per your requirements.

Remember to include the Bootstrap CSS and JS files from a CDN (Content Delivery Network) by including the appropriate `<link>` and `<script>` tags in the `<head>` and `<body>` sections of your HTML code.

When you save the code in an HTML file and open it in a web browser, you should see a responsive dashboard layout with the specified widgets.

Output:

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc

facebook.com/pythontpoint

twitter.com/pythontpoint

instagram.com/pythontpoint

PreviousNext

Join our newsletter for the latest updates.

About us

pythontpoint.org : The best online tutorial to learn Python, Machine Learning, Deep Learning, Data Science, Power BI, SQL & Java.
We Provide best Academic training, Corporate training, Project & Internship.

Our Services

Corporate & Academic Training
Website Designing
Website Development
Digital Marketing
Project & Thesis

Contact Us

Plot No-741, 2nd Floor, Jayadev Vihar, 751013, Bhubaneswar, Odisha
Call :
0674-2361252
Mail : info@silansoftware.com
Contact Us
Privacy Policy

Our Courses

Our Tutorials