How to align the panel heading (left) and the panel to be equidistant from both sides in bootstrap

Actually I am trying to get the output as shown in the image, but unable to find the right edits in the tag.

To be achieved

So far I have tried to create most of the webpage and achieved this present situation So as you can see the panel heading and the panel alignment is not same as the one in the previous picture.

present situation

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body>

<!-- CREATE THE REPORT LAYOUT ACCORDING TO GIVEN SPECIFICATIONS  -->
<!-- HINT :- Use PANEL,bootstrap alerts, List and UL concepts -->
<div class="container">
    <h2>Automatic tasks report</h2>
    <div class="panel panel-default">
        <div class="panel-heading">Execution summary of tasks<span class="caret"></span></div>
        <h2>Execution Log Information</h2>
        <div class="panel-body">
            <ul class="list group">
                <li class="list-group-item text-body">Total tasks run<span class="badge">12</span></li>
                <li class="list-group-item text-success">Successful tasks<span class="badge">4</span></li>
                <li class="list-group-item text-warning">Warnings<span class="badge">3</span></li>
                <li class="list-group-item text-danger">Failed tasks<span class="badge">5</span></li>
            </ul>
        </div>
        <div class="panel-footer">End of execution log information</div>
    </div>
</div>

</body>
</html>

JavaScript
​x
 
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body>
​
<!-- CREATE THE REPORT LAYOUT ACCORDING TO GIVEN SPECIFICATIONS  -->
<!-- HINT :- Use PANEL,bootstrap alerts, List and UL concepts -->
<div class="container">
    <h2>Automatic tasks report</h2>
    <div class="panel panel-default">
        <div class="panel-heading">Execution summary of tasks<span class="caret"></span></div>
        <h2>Execution Log Information</h2>
        <div class="panel-body">
            <ul class="list group">
                <li class="list-group-item text-body">Total tasks run<span class="badge">12</span></li>
                <li class="list-group-item text-success">Successful tasks<span class="badge">4</span></li>
                <li class="list-group-item text-warning">Warnings<span class="badge">3</span></li>
                <li class="list-group-item text-danger">Failed tasks<span class="badge">5</span></li>
            </ul>
        </div>
        <div class="panel-footer">End of execution log information</div>
    </div>
</div>
​
</body>
</html>

Answer

I think you just need to enclose the Execution Log Information in a panel-body division so it has the same spacing, and then adjust the padding for the ul on the left, the new panel-body on the bottom, and the h2 tag’s bottom margin, all to 0.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <h2>Automatic tasks report</h2>
    <div class="panel panel-default">
        <div class="panel-heading">Execution summary of tasks<span class="caret"></span></div>
        <div class="panel-body" style="padding-bottom: 0;">
            <h2 style="margin-bottom: 0;">Execution Log Information</h2>
        </div>
        
        <div class="panel-body">
            <ul class="list group" style="padding-left: 0;">
                <li class="list-group-item text-body">Total tasks run<span class="badge">12</span></li>
                <li class="list-group-item text-success">Successful tasks<span class="badge">4</span></li>
                <li class="list-group-item text-warning">Warnings<span class="badge">3</span></li>
                <li class="list-group-item text-danger">Failed tasks<span class="badge">5</span></li>
            </ul>
        </div>
        <div class="panel-footer">End of execution log information</div>
    </div>
</div>

JavaScript
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
​
<div class="container">
    <h2>Automatic tasks report</h2>
    <div class="panel panel-default">
        <div class="panel-heading">Execution summary of tasks<span class="caret"></span></div>
        <div class="panel-body" style="padding-bottom: 0;">
            <h2 style="margin-bottom: 0;">Execution Log Information</h2>
        </div>
        
        <div class="panel-body">
            <ul class="list group" style="padding-left: 0;">
                <li class="list-group-item text-body">Total tasks run<span class="badge">12</span></li>
                <li class="list-group-item text-success">Successful tasks<span class="badge">4</span></li>
                <li class="list-group-item text-warning">Warnings<span class="badge">3</span></li>
                <li class="list-group-item text-danger">Failed tasks<span class="badge">5</span></li>
            </ul>
        </div>
        <div class="panel-footer">End of execution log information</div>
    </div>
</div>

For reference, you’re using Bootstrap 3, so the tag probably should be twitter-bootstrap-3, rather than Bootstrap-4.

Advertisement

Answer