Bootstrap 4 border class not working for top, right

user_7799917 0
Viewed 11645

I am trying to give border to div with bootstrap 4 border. With only border property it is appearing weird while with other properties no border is showing up. Please find the code snippet below.

I have tried with the beta 2 version also.

Let me know if I am missing something.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>

<body>
    <!-- Just created a contianer to test the border class -->
    <div class="container">
        <div class="text-center">
            <h1> Testing bootstrap 4</h1>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <!-- Testing span with class border -->
                <span class="border">
                <div class="text-primary">Testing Bootsrap 4 Border </div>
            </span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <span class="border-0">Testing Bootsrap 4 Border 0</span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <span class="border-top-0">Testing Bootsrap 4 Border top 0</span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <span class="border-right-0">Testing Bootsrap 4 Border right 0</span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-sm-12">
                <span class="border border-light">testing border light</span>
            </div>
            <div class="col-sm-12"> col 2</div>
        </div>
    </div>
</body>

</html>

bootstrap-4 css html
3 Answers

For bootstrap border to work, you have to add the border class. So for example, when you write <span class="border-right-0"> It is stating that no border should be to the right. You haven't stated a border to begin with though so no border is going to show. What you need to do is <span class="border border-right-0">.

user_56287310

It's the Subtractive border so first, you will need a border so you need to include the border class first.

 <span class="border border-top-0"></span>

To see it in more effect try this:

 <span class="border border-top-0 p-2 border-primary">Border</span>

Using contextual classes and padding utilities you can easily get the difference.

user_119439230

Hey you just need to add some classes for showing the border i.e. border border-primary, border border-secondary etc.

And class "border border-0" means no border.

In class="border border-light", "border-light" is another contextual border color.

Below are useful classes:

A list of contextual border color you can use the below classes:

border-primary

border-secondary

border-white

border-dark

border-light

border-info

border-warning

border-danger

border-success

If you want to get easier then try https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp or https://v4-alpha.getbootstrap.com/utilities/borders/ 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<title>Home</title>
</head>
<body>
    <!-- Just created a contianer to test the border class -->
    <div class="container">
        <div class="text-center">
            <h1> Testing bootstrap 4</h1>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <!-- Testing span with class border -->
                <span class="border">

                <div class="text-primary">Testing Bootsrap 4 Border </div>

            </span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <span class="border-0 border border-primary">Testing Bootsrap 4 Border 0</span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <span class="border border-primary border-top-0">Testing Bootsrap 4 Border top 0</span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <span class="border border-danger border-right-0">Testing Bootsrap 4 Border right 0</span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-sm-12">
                <span class="border border-light">testing border light</span>
            </div>
            <div class="col-sm-12"> col 2</div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>

</html>

user_48888010
Related