Bootstrap-List

Three types of lists in bootstrap:

  • Unstyled Ordered and Unordered Lists

  • Inline list

You can do this by simply applying the class .list-inline to the respective <ul> or <ol>, and the class .list-inline-item to the <li> elements.

 

Head section code:

<style>

    .bs-example{

       margin: 20px;

    }

</style>

 

Body section code:

<body>

<div class="bs-example">

    <h2 class="mb-3">Inline Unordered List</h2>

    <ul class="list-inline">

        <li class="list-inline-item">Home</li>

        <li class="list-inline-item">Products</li>

        <li class="list-inline-item">About Us</li>

        <li class="list-inline-item">Contact</li>

    </ul>

</div>

</body>

 

 

Creating Horizontal Lists

Head Section Code:

<style>

    .bs-example{

      margin: 20px;

    }

</style>

 

Body Code:

<div class="bs-example">

    <h2 class="mb-3">Horizontal Definition Lists</h2>

<dl class="row">

<dt class="col-sm-3">User Agent</dt>

<dd class="col-sm-9">An HTML user agent is any device that interprets HTML documents.</dd>

</dl>

</div>

Powered  by Codersarts