The border class in Bootstrap 4 seems to be malfunctioning when it comes to the top

I'm struggling to add a border to a div using Bootstrap 4. When I try using only the border property, it looks strange, and when I use other properties, no border appears. Here is the code snippet:

I even tried with the beta 2 version.

If there is something I'm overlooking, please let me know.

<!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>
    <!-- Created a container 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 the border class -->
                <span class="border">
                <div class="text-primary">Testing Bootstrap 4 Border </div>
            </span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <span class="border-0">Testing Bootstrap 4 Border 0</span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <span class="border-top-0">Testing Bootstrap 4 Border top 0</span>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <span class="border-right-0">Testing Bootstrap 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>

htmlcssbootstrap-4

Answer №1

In order for the bootstrap border feature to take effect, you must include the border class. For instance, if you input 

<span class="border-right-0">
, you are indicating that there should be no border on the right side. However, since you did not specify a border initially, no border will be displayed. To resolve this, you should use 
<span class="border border-right-0">
.

Answer №2

If you want to create a Subtractive border effect, start by adding a border class to your element.

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

For a more noticeable effect, try this:

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

You can easily customize the appearance by using contextual classes and padding utilities.

Answer №3

If you want to display borders, simply add border-related classes like border-primary, border-secondary, etc.

Using the class "border border-0" will result in no border being displayed.

For example, in the class "border border-light," "border-light" represents a specific border color.

Here are some helpful classes to use:

Here is a list of contextual border colors you can utilize:

border-primary

border-secondary

border-white

border-dark

border-light

border-info

border-warning

border-danger

border-success

For more convenience, you can refer to https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp or 

<!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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to conceal the TippyJS tooltip so it doesn't show up on video embeds

My website has tooltips enabled, but I am looking to hide the tooltip pop-ups that appear specifically over youtube video embeds. Upon inspecting the webpage, I found the code snippet below that is associated with youtube videos: <div data-tippy-root id ...

javascripthtmljquerycss

When utilizing the JavaScript createElement() method to create elements on keydown, it will not be compatible with jQuery's draggable() method

I'm currently developing a drag and drop feature for a project, allowing users to add items to a work area and then position them by dragging. I'm facing an issue where I want to create multiple instances of the same element using a key code, but ...

javascripthtmljquerycssjquery-ui-draggable

All the optgroups in the select picker are being duplicated from the first optgroup

I am currently facing an issue with a select picker multiple dropdown. When I add optgroups, the values of the second and third optgroups are being copied by the first optgroup. The opt-groups are being populated via JavaScript. <select class="mod ...

htmljquerybootstrap-5bootstrap-selectpicker

Why is Bootstrap 4 causing these columns to stack vertically instead of horizontally?

After upgrading to bootstrap 4, I noticed that my gallery layout has changed from horizontal in bootstrap 3 to vertical. What could have caused this sudden change? To see the issue, here is a link to a fiddle. Here are my column settings: <div class= ...

csstwitter-bootstrapbootstrap-4

"An issue with IE9 causing small dots on rounded corners during rendering

Help Needed: Strange IE9 Rendering Issue I'm experiencing an odd rendering problem in Internet Explorer 9. You see those little white dots on the left? What could be causing them? Any suggestions on how to remove them? Microsoft, why always so myst ...

jquerycssinternet-explorer-9

I'm having trouble with my code - I suspect the issue might be related to the header() function

When I execute the following code, it resets the form and keeps me on the same page. I am aiming for it to redirect to home.php after a successful login. I believe there is an issue with my header() I have experimented with different approaches and have ...

phphtmlmysql

Discovering the center of an element and implementing a left float

I'm looking for a way to dynamically position the element #ucp_arrow in the middle of a div using float: left. Here is an illustration: https://i.stack.imgur.com/nzvgb.png Currently, I have hard-coded it like this: JAVASCRIPT: $("#a_account").cli ...

javascriptjqueryhtmlcss

Using flexbox auto margin within nested elements: A guide

Is it possible to achieve consistent margins between the heading and list items using flexbox? section { display: flex; background: #eee; } h1 { background: #bbb; } ul { display: flex; flex: 1; list-style-type: none; background: #ccc; ...

cssflexbox

Tips for resetting the form input fields in Vue.js after the user has successfully submitted the form

I am facing an issue with my registration page. After the user enters some values and successfully submits the form, I want to clear all the fields. To achieve this, I am using a predefined function called reset() inside the script section. However, the ...

javascripthtmlcssvue.js

Creating a Runescape Tracker: What essentials should I include?

Hello everyone, I am a beginner in the world of programming and I am excited to learn. I have heard that the best way to learn is by working on a project. I have always been interested in creating a Skill Tracker for my clan. Can you offer any advice on wh ...

javascriptphphtmlmysqlcss

jQuery Masonry now renders "row blocks" as opposed to trying to fit elements into place

Have you ever heard of the jQuery masonry plugin? It's a great tool for placing images in "blocks" instead of trying to squeeze them into empty spaces. Take a look at this explanation: But how can we minimize those pesky "voids"? HTML: <!-- This ...

jquerycssjquery-masonryjquery-isotope

Creating an HTML table with jQuery

I've almost got it working, but something's missing. I'm creating an HTML table using JQuery with a list of names populating the first column. The structure is fine overall, including the header and colgroups. However, I'm having troubl ...

javascriptjqueryhtml

The mystery of the Accordion Effect: A Next.js/React.js issue where it slides up but refuses to

After implementing a custom accordion using next.js, I encountered an issue where the slide animation worked successfully when moving up and out upon clicking the button. However, when trying to move it back down into the content, it did not animate as exp ...

javascriptcssreactjsnext.jsaccordion

To enhance the appearance of an input field, implement the Bootstrap check feature

Using bootstrap in my app, I am dealing with a readonly input where I would like to add a checkmark inside of it. My attempt to simply add <input readonly type="text" id="kyc_status" class="form-control" value="Success ...

htmlbootstrap-5

Is there a way to enable multiple selections in a particular section?

Currently, I am in the process of working on my step by step order and I want to express my gratitude for all the assistance I have received so far. Despite the help, I still have some unanswered questions! The steps in my project are categorized into dif ...

javascriptjqueryhtmlcss

Guide to generating a dropdown menu and linking it with data received from a server

I am completely new to Angular and recently received a project involving it. My task is to create a nested dropdown list for Json data retrieved from a server using Rest Api calls. The data contains a Level attribute that indicates the hierarchy level of ...

htmlangulartypescript

transfer the output from the second selection to the adjacent div

I am utilizing a library called select2 specifically for single choice scenarios. My goal is to transfer the selected option to a different div once it has been chosen. Here is the code I have so far: https://jsfiddle.net/hxe7wr65/ Is there a way to ach ...

javascriptjqueryhtmlcssjquery-select2

What is the best way to eliminate duplicate values from a column in a data set

Time To Status Off-Track On-Track 10:28 AM gf 6233 4 4 10:32 AM dd 3835 7 10:40 AM ss 3235 4 10:43 AM ww 6621 5 11:06 AM zz 3837 ...

phphtml

The presence of the `class` attribute on the `td` element

Is there a reason why the rows with the "odd" td class in this script do not toggle to blue like the rows without the "odd" class? EDIT: When you click on a row (tr), it is supposed to turn blue (.hltclick) and return to its original color when clicked ag ...

jqueryhtmlcss

Doesn't the .stop(true) function completely clear the queue as it should?

My slideshow has a hover function to pause it using .stop(true). Upon mouse exit, it should resume playing from where it left off. However, currently, when I hover over it, the animation stops and then continues until it reaches its target, pausing there a ...

javascriptjqueryhtmlcss