Search code examples
djangoborderbootstrap-5

Why is the border-left border-right not working for Bootstrap 5 Django?

So I have the following code:

{% load static %}

<!DOCTYPE html>
<html>
<head>
    <title>Verification Code Email</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <style>
        .insta-icon{width:50%; float:right;}
    </style>    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-1 offset-1 border-right">    # This one right here
                <img class="insta-icon"src="{% static '/images/instagram_icon.png' %}">                 
            </div>
            <div class="col-10"> b</div>
        </div>
    </div>
    <div class="container">
    </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>

</html>

Now when I do just border, the border is shown, and when I do border-bottom or border-top, the borders are shown. However, when I use border-left or border-right, the border outlines aren't shown.

Also, I tried using a styles by adding an insta-nav class to the div class and override the styles by adding border:1px, but the border isn't added.

Why would the reasons for these two be so?? Any help would be appreciated

Solution

  • You need to use border-start or border-end instead of border-left or border-right in bootstrap 5.

    Horizontal direction sensitive variables, utilities and mixins are renamed with more logical names — start and end in lieu of left and right in Bootstrap 5.

    You can see more bootstrap 5 migration details here: https://getbootstrap.com/docs/5.0/migration/#sass