html – Bootstrap 'pulling right' class is not working a expected-ThrowExceptions

Exception or error:

Iam facing some issue with pull-right class as iam pulling the anchor link right side it is stop working

<div class="panel-group">
        <div class="pull-right">
            <a data-toggle="collapse" href=".panel-collapse">Expand all</a>
        </div>
        <div>
            <p class="spantext"> 4 Sections • 12 Lectures • 6h&nbsp;15m total length</p>
        </div>

        <div class="panel">

            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="float-right" data-toggle="collapse" href="#collapse1">Welcome</a>
                    <p class="spantext spanright">5 Lectures • 6h&nbsp;15m total length</p>
                </h4>

            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <ul class="list-group">
                    <li class="list-group-item"><a href=""><i class="fa fa-youtube-play"></i>One</a></li>
                    <li class="list-group-item"><a href=""><i class="fa fa-youtube-play"></i>Two</a></li>
                    <li class="list-group-item"><a href=""><i class="fa fa-youtube-play"></i>Three</a></li>
                </ul>

            </div>
        </div>

How to solve:

The .pull-left and .pull-right classes have been replaced with the .float-left and .float-right classes in Bootstrap 4. These utility classes are used to float an element to the left or right on the various viewport sizes based on the Bootstrap Grid. It works using the CSS float property. source

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <div class="panel-group">
      <div class="pull-right">
        <a data-toggle="collapse" href=".panel-collapse">Expand all</a>
      </div>
      <div class="float-right">
        <a data-toggle="collapse" href=".panel-collapse">Expand all</a>
      </div>
      <div>
        <p class="spantext"> 4 Sections • 12 Lectures • 6h&nbsp;15m total length</p>
      </div>
      <div class="panel">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a class="float-right" data-toggle="collapse" href="#collapse1">Welcome</a>
            <p class="spantext spanright">5 Lectures • 6h&nbsp;15m total length</p>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
          <ul class="list-group">
            <li class="list-group-item"><a href=""><i class="fa fa-youtube-play"></i>One</a></li>
            <li class="list-group-item"><a href=""><i class="fa fa-youtube-play"></i>Two</a></li>
            <li class="list-group-item"><a href=""><i class="fa fa-youtube-play"></i>Three</a></li>
          </ul>
        </div>
      </div>
    </div><!-- You Forgot to close this -->

Leave a Reply

Your email address will not be published. Required fields are marked *