Navigation Level Demo: Level 0

<div class="container pt-2 pt-lg-3 ">
    <nav aria-label="Brödsmulor">
        <ol class="breadcrumb m-0 p-0 mb-0 font-size-sm  bg-transparent">
            <li class="breadcrumb-item mb-0"><a href="../../#.html">Ekonomihögskolan</a></li>
            <li class="breadcrumb-item mb-0 active" aria-current="page">Utbildning</li>
        </ol>
    </nav>
</div>

<main id="lunds-universitet" class="main">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-8 col-xl-8 mb-6 mb-lg-0">
                <article>
                    <h1 class="">Utbildning</h1>

                    <p class=" lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed lacus luctus purus tempus vehicula. Aliquam malesuada fermentum faucibus. Nunc viverra tortor vitae sollicitudin pharetra. Integer molestie tristique justo ac venenatis. Etiam sit amet rhoncus quam.</p>

                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor <a href="#">link text</a>. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl.</p>

                    <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>

                    <h2 class="">Lorem ipsum dolor sit amet</h2>

                    <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>

                    <h3 class="">Lorem ipsum dolor sit amet</h3>

                    <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>

                    <figure>
                        <blockquote class="blockquote">
                            <p class="mb-0">
                                <i class="fas fa-3x fa-quote-right fa-pull-left"></i>
                                Lorem ipsum dolor sit amet, consectetur emut adipiscing elit. Donec sed lacus luctus purus eti tempus vehicula. Aliquam malesuada fermentum faucibus. Nunc viverra tortor vitae sollicitudinaretra. Integer molestie tristique justo ac venenatis. Etiam sit amet rhoncus.
                            </p>
                        </blockquote>
                        <figcaption class="blockquote-footer text-end">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
                    </figure>

                    <h3 class="">Lorem ipsum dolor sit amet</h3>

                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link px-0 py-1" href="../../#.html">Lorem ipsum dolor sit amet</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-0 py-1" href="../../#.html">Tempus vehiculaiquam Malesuada fermentum faucibus</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-0 py-1" href="../../#.html">Nunc viverra tortor vitae sollici</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-0 py-1" href="../../#.html">Studin pharetra. Integer molestie</a>
                        </li>
                    </ul>

                    <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>

                    <ul class="list">
                        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                        <li>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</li>
                        <li>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</li>
                        <li>Aliquam tincidunt mauris eu risus.</li>
                        <li>Vestibulum auctor dapibus neque.</li>
                    </ul>

                    <ol class="list">
                        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                        <li>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</li>
                        <li>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</li>
                        <li>Aliquam tincidunt mauris eu risus.</li>
                        <li>Vestibulum auctor dapibus neque.</li>
                    </ol>

                    <div class="infobox bg-copper-50">
                        <h3 class=" h3 mt-0 mb-3">Lorem ipsum</h3>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed lacus lupurus tempus vehicula. Aliquam malesuada fermentum faucibus. Nunc vivtortor vitae sollicitudin pharetra. Integer molestie tristique justo ac venenEtiam sit amet rhoncus quam. Ut congue purus ut sem pretium, ac egestaspellentesque. Etiam vulputate placerat.</p>

                        <div class=" text-end font-weight-normal">
                            <a href="../../#.html" class="nav-undecorated">Lorem ipsum&nbsp;<i class="fal fa-chevron-circle-right  fa-lg"></i>
                            </a>
                        </div>

                    </div>

                    <figure class="figure">
                        <img src="../../images/_content/placeholder_1@1x.jpg" srcset="../../images/_content/placeholder_1@1x.jpg 1x, ../../images/_content/placeholder_1@2x.jpg 2x" alt="A generic square placeholder image with rounded corners in a figure." class=" figure-img img-fluid m-0">

                        <figcaption class="figure-caption bg-dark text-white p-2">Bildtext proin porttitor auctor augue a aliquet risus dignissim at. Foto: Förnamn Efternamn</figcaption>
                    </figure>

                    <table class="table table-striped">
                        <thead class=" table-dark">
                            <tr>
                                <th scope="col" class="">#</th>
                                <th scope="col" class="">First</th>
                                <th scope="col" class="">Last</th>
                                <th scope="col" class="">handle</th>
                            </tr>
                        </thead>
                        <tbody class="">
                            <tr class="">
                                <th class="" scope="row">1</th>
                                <td class="">Mark</td>
                                <td class="">Otto</td>
                                <td class="">@mdo</td>
                            </tr>
                            <tr class="">
                                <th class="" scope="row">2</th>
                                <td class="">Jacob</td>
                                <td class="">Thornton</td>
                                <td class="">@fat</td>
                            </tr>
                            <tr class="">
                                <th class="" scope="row">3</th>
                                <td class="">Larry</td>
                                <td class="">The Bird</td>
                                <td class="">@twitter</td>
                            </tr>
                        </tbody>
                    </table>

                </article>
            </div>
            <div class="col-12 col-lg-4 mb-6 mb-lg-0">
                <div class="infobox bg-sky-50">
                    <h3 class=" h3 mt-0 mb-3">Lorem ipsum dolor</h3>

                    <p>Nam mollis varius ligula. Suspnd isse ac viverra ligula, eu accusan ante. Aliquam eget sem et nibh mattis interdum.</p>

                    <p>Maecenas placerat tempus risu vel mollis nulla blandit non.</p>

                    <div class=" text-end font-weight-normal">
                        <a href="../../#.html" class="nav-undecorated">Lorem ipsum&nbsp;<i class="fal fa-chevron-circle-right  fa-lg"></i>
                        </a>
                    </div>

                </div>

                <div class="infobox bg-flower-50">
                    <h3 class=" h3 mt-0 mb-3">Lorem ipsum</h3>

                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link px-0 py-1" href="../../#.html">Lorem ipsum dolor sit amet</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-0 py-1" href="../../#.html">Tempus vehiculaiquam Malesuada fermentum faucibus</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-0 py-1" href="../../#.html">Nunc viverra tortor vitae sollici</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-0 py-1" href="../../#.html">Studin pharetra. Integer molestie</a>
                        </li>
                    </ul>

                </div>

                <div class="infobox bg-copper-50">
                    <h2 class=" h3 mt-0 mb-3">Kontakt</h2>

                    <p><a href='#'>Johan Marklund</a>, prefekt<br>046-222 8013</p>

                    <p><a href='#'>Jan Olhager</a>, bitr prefekt<br>046-222 0366</p>

                    <p><strong>Allmänna frågor:</strong><br><a href='#'>info@tlog.lth.se</a><br>046-222 9151</p>

                    <p><strong>Institutionen för teknisk ekonomi och logistik</strong><br><strong>Lunds universitet, LTH</strong><br>Box 118<br>221 00 LUND<br><strong>Hämtställe: 9</strong></p>

                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-12 col-lg-8">
                <div class=" border-top border-dark mt-5 py-3">
                    Sidansvarig: <a href="../../mailto:anna.annassdotter@lu.se">Anna.Annassdotter@lu.se</a> &nbsp;|&nbsp; <strong>2018-05-12</strong>
                </div>

            </div>
        </div>
    </div>
</main>
<div class="bg-dark text-dark-25 pt-6 overflow-x-hidden">
    <div class="container my-0 mx-auto px-2">
        <div class="row justify-content-center border-bottom border-white mx-1 mx-lg-0 pb-4 nav-collapse font-size-sm mx-0 mx-lg-auto">
            <div class="col-lg">
                <div class="mb-3 mb-lg-4">
                    <h1 class="font-base">
                        <a href="#dark-institutioner" class="text-uppercase font-weight-normal no-events-lg nav-undecorated nav-link collapsed d-flex justify-content-between p-0 navigation-block-dark" data-bs-toggle="collapse" aria-expanded="false" aria-controls="dark-institutioner">
                            <span>Institutioner</span>
                            <div class="text-dark-25 d-lg-none">
                                <span class="collapse-show"><i class="fal fa-chevron-down"></i></span>
                                <span class="collapse-hide"><i class="fal fa-chevron-up"></i></span>
                            </div>
                        </a>
                    </h1>
                    <div class="collapse collapse-lg" id="dark-institutioner">
                        <ul class="nav flex-column">
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Ekonomisk-historiska institutionen</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Företagsekonomiska institutionen</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Institutionen för handelsrätt</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Institutionen för informatik</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Nationalekonomiska institutionen</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Statistiska institutionen</a></li>
                        </ul>
                    </div>
                </div>
                <div class="mb-3 mb-lg-4">
                    <h1 class="font-base">
                        <a href="#dark-forskningsinstitut-och-centrum" class="text-uppercase font-weight-normal no-events-lg nav-undecorated nav-link collapsed d-flex justify-content-between p-0 navigation-block-dark" data-bs-toggle="collapse" aria-expanded="false" aria-controls="dark-forskningsinstitut-och-centrum">
                            <span>Forskningsinstitut och centrum</span>
                            <div class="text-dark-25 d-lg-none">
                                <span class="collapse-show"><i class="fal fa-chevron-down"></i></span>
                                <span class="collapse-hide"><i class="fal fa-chevron-up"></i></span>
                            </div>
                        </a>
                    </h1>
                    <div class="collapse collapse-lg" id="dark-forskningsinstitut-och-centrum">
                        <ul class="nav flex-column">
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Centrum för ekonomisk demografi</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Centrum för handelsforskning</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Agrifood Economics Centre</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Knut Wicksells centrum för finansvetenskap</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Sten K Johnson Centre for Entrepreneurship</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg">
                <div class="mb-3 mb-lg-4">
                    <h1 class="font-base">
                        <a href="#dark-nyborjarprogram-och-kurser" class="text-uppercase font-weight-normal no-events-lg nav-undecorated nav-link collapsed d-flex justify-content-between p-0 navigation-block-dark" data-bs-toggle="collapse" aria-expanded="false" aria-controls="dark-nyborjarprogram-och-kurser">
                            <span>Nybörjarprogram och kurser</span>
                            <div class="text-dark-25 d-lg-none">
                                <span class="collapse-show"><i class="fal fa-chevron-down"></i></span>
                                <span class="collapse-hide"><i class="fal fa-chevron-up"></i></span>
                            </div>
                        </a>
                    </h1>
                    <div class="collapse collapse-lg" id="dark-nyborjarprogram-och-kurser">
                        <ul class="nav flex-column">
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">BSc International Business</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Ekonomie kandidatprogrammet</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Systemvetenskapliga kandidatprogrammet</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Politices kandidatprogrammet</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Kandidatprogrammet i praktisk filosofi, politik &amp; ekonomi</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Fristående kurser</a></li>
                        </ul>
                    </div>
                </div>
                <div class="mb-3 mb-lg-4">
                    <h1 class="font-base">
                        <a href="#dark-forskarutbildning" class="text-uppercase font-weight-normal no-events-lg nav-undecorated nav-link collapsed d-flex justify-content-between p-0 navigation-block-dark" data-bs-toggle="collapse" aria-expanded="false" aria-controls="dark-forskarutbildning">
                            <span>Forskarutbildning</span>
                            <div class="text-dark-25 d-lg-none">
                                <span class="collapse-show"><i class="fal fa-chevron-down"></i></span>
                                <span class="collapse-hide"><i class="fal fa-chevron-up"></i></span>
                            </div>
                        </a>
                    </h1>
                    <div class="collapse collapse-lg" id="dark-forskarutbildning">
                        <ul class="nav flex-column">
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Ekonomisk historia</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Företagsekonomi</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Handelsrätt</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Informatik</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Nationalekonomi</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Statistik</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg">
                <div class="mb-3 mb-lg-4">
                    <h1 class="font-base">
                        <a href="#dark-magister-och-masterprogram" class="text-uppercase font-weight-normal no-events-lg nav-undecorated nav-link collapsed d-flex justify-content-between p-0 navigation-block-dark" data-bs-toggle="collapse" aria-expanded="false" aria-controls="dark-magister-och-masterprogram">
                            <span>Magister- och masterprogram</span>
                            <div class="text-dark-25 d-lg-none">
                                <span class="collapse-show"><i class="fal fa-chevron-down"></i></span>
                                <span class="collapse-hide"><i class="fal fa-chevron-up"></i></span>
                            </div>
                        </a>
                    </h1>
                    <div class="collapse collapse-lg" id="dark-magister-och-masterprogram">
                        <ul class="nav flex-column">
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Accounting &amp; Finance</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Economic Development &amp; Growth</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Economic Growth, Population &amp; Development</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Economics</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Entrepreneurship &amp; Innovation</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">European &amp; International Tax Law</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Finance</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Information Systems</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Innovation &amp; Spatial Dynamics</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">International Economics with a focus on China</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">International Marketing &amp; Brand Management</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">International Strategic Management</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Managing People, Knowledge &amp; Change</a></li>
                            <li class="nav-item"><a href="" class="nav-link py-2 py-lg-1 px-0">Master&#x27;s in Management</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>