<div class="panel panel-default">
    <div class="panel-body">
        <h1>
            Headings
        </h1>
        <p>
            Headings are used to structure the content of a document or webpage. The number of hash symbols (#) determines the level of the heading, with a single hash symbol (#) representing the highest level (heading 1), two hash symbols (##) representing the second level (heading 2), and so on.
        </p>
        <h3>
            Header 1
        </h3>
        <pre><code># Header 1</code></pre>
        <h4>
            Example
        </h4>
        <h1>Header 1</h1>
        <hr>

        <h3>
            Header 2
        </h3>
        <pre><code>## Header 2</code></pre>
        <h4>
            Example
        </h4>
        <h2>Header 2</h2>
        <hr>

        <h3>
            Header 3
        </h3>
        <pre><code>### Header 3</code></pre>
        <h4>
            Example
        </h4>
        <h3>Header 3</h3>
        <hr>

        <h3>
            Header 4
        </h3>
        <pre><code>#### Header 4</code></pre>
        <h4>
            Example
        </h4>
        <h4>Header 4</h4>
    </div>
</div>