Overlapping borders in Bootstrap 4 design

Working on my project with Bootstrap 4 and encountered a coding issue. Here is the code snippet:

.form-info-tab {
     border: 1px solid #ccc;
     border-collapse: separate;
     border-spacing: 0px;
     padding:5px;
     text-align:center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

<span class="col-xs-12 col-sm-6 col-md-3 form-info-tab">
   <i class="fas fa-hourglass-half"></i>
   <label class="modalLables">One </label>
</span>
    
<span class="col-xs-12 col-sm-6 col-md-3 form-info-tab">
   <i class="fas fa-hourglass-half"></i>
   <label class="modalLables">Two</label>
</span>

Encountering an issue where right borders are overlapping. Any suggestions on how to fix it?

Refer to the image below for a visual representation of the issue: https://i.stack.imgur.com/Tp5mA.png

htmlcssbootstrap-4

Answer №1

To remove the right border from all tabs except for the last one, you can use the :not(:last-of-type) selector. This selector targets all elements of a specific type except for the last element in the series of sibling elements.

Another approach is to eliminate the left border from all items except for the first one. In this case, you would utilize the :first-of-type selector.

.form-info-tab {
     border: 1px solid #ccc;
     border-collapse: separate;
     border-spacing: 0px;
     padding:5px;
     text-align:center;
}

.form-info-tab:not(:last-of-type) {
     border-right: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

<!-- Wrapper div for adding padding around tabs (optional) -->
<div class="p-3">
    <span class="col-xs-12 col-sm-6 col-md-3 form-info-tab">
       <i class="fas fa-hourglass-half"></i>
       <label class="modalLables">One </label>
    </span>
        
    <span class="col-xs-12 col-sm-6 col-md-3 form-info-tab">
       <i class="fas fa-hourglass-half"></i>
       <label class="modalLables">Two</label>
    </span>
</div>

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

The switchView feature is currently malfunctioning and unable to access the content on the next page

For my application's admin panel design, I've divided my home into containers. The aim is to display details of clicked items in Images.html and Categories.html when a menu item in the 2nd container (also known as side bar) is clicked. However, m ...

javascripthtmlnode.jsbootstrap-4

The appearance of an SVG image inside an absolutely positioned div varies between Firefox and Chrome

The web page I am working on can be found at the following link: This webpage consists of text and SVG images, with the hex bolts positioned over specific areas of the text. Achieving this effect requires absolute positioning within a relatively positione ...

htmlcsstextflexboxgraphical-logo

Establish restrictions for the minimum and maximum values for each year in the Date Range Picker

After searching for answers to my question, I have found some general solutions but none that fit my specific problem. I created a backend system for users to manage the availability of hotel rooms throughout the selected year. Using HTML/PHP/MySQL, I dis ...

phpjqueryhtmldaterangepicker

Is it possible to shift the div inline-block using the CSS :after selector?

I'm looking to adjust the placement of the disk icon so that it aligns more with the baseline of the text without increasing the vertical space between lines. Below is the CSS code I've worked on so far: .openPage:after { content: ' &a ...

htmlcss

Make the most of your Bootstrap 3 layout by utilizing a full page container that fills both the width and height between a fixed header and

I am currently working on a basic bootstrap page with the Example template from Bootstrap's website. I want the content in the middle to take up the space between the header and footer, while ensuring that both the header and footer remain visible at ...

javascriptjqueryhtmlcsstwitter-bootstrap

The iPhone is having trouble resizing background images in Bootstrap 5 Carousel

While working on my website using the Bootstrap 5 carousel template, I encountered an issue with the carousel images not resizing correctly on my iPhone. The images appear zoomed in to the upper left corner and cut off on smaller devices. I've attemp ...

cssbootstrap-5bootstrap-carousel

Tips for dynamically resizing an image to suit any screen size, such as with Bootstrap 4

I am having trouble centering an image on the screen and making sure it fits properly without requiring the user to scroll (on screens larger than a tablet). Here is my desired outcome: https://i.sstatic.net/LbfV8.png The top row shows the expected resu ...

htmlcssimagebootstrap-4scale

Adding custom fonts to DOMPDF: a step-by-step guide

First, I moved the dompdf library folder to /dompdf Next, I added a /fonts folder containing Roboto-Black.ttf Then, I created an index.php file <?php // Autoloader inclusion require_once 'dompdf/autoload.inc.php'; // Namespace reference ...

phpcssdompdf

What is the technique to achieve a seamless blur effect?

Is there a way to create a smooth blur similar to a gradient transitioning from transparent to dark? .img { background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg); background-size: cover; background-position: center; width: 5 ...

htmlcss

Generate a separate div in an HTML file for each item listed in a JSON document

I have a JSON file structured like this: { "text": "HelloWorld", "id&quo;t: "1", }, { "text": "HelloMoon", "id": "2", } Now, I want to generate a <div> in my HTML for ...

javascripthtmljson

Looking for assistance with jqGrid

Is there a method to confirm if the grid has finished loading using a separate function? My goal is to automatically click on the first row and move that row to the second grid once this action occurs. jQuery("#search_grid").jqGrid('setGridParam&apo ...

phpjavascripthtmlajaxjqgrid

Ways to retrieve the index of an element with a certain class

When I click on an item with a specific class, I want to retrieve its index within that class only. <div class="gallery"> <div class="gallery-item"></div> <div class="gallery-item"></div> <div class="gallery-item ...

javascripthtmljquery

Creating a Stylish CSS Table Utilizing DIV Elements: Preventing the Top Row from Scrolling

Utilizing a pure DIV table with the display: table, table-row, table-cell format for styling, I have managed to make the entire table scroll except for the header row. However, I am in search of methods that can prevent the header row (1st row) from scroll ...

htmlcss

BS grid malfunctioning in a non-uniform manner

When a division in the advantage grid is clicked, the card body of another division collapses. However, this does not occur in the disadvantage grid. Clicking on one section in the disadvantage grid does not collapse another section as it does in the advan ...

htmlcsstwitter-bootstrap-3frontendtwitter-bootstrap-4-beta

CSS issue encountered: "Value of property is not valid"

When working with CSS, I encountered an error stating "Invalid Property Value" while inspecting the transform element of the Service section in the Wall Street theme. Could someone kindly assist me with the necessary steps to rectify this issue? ...

csstransform

Place a button in relation to the top of its parent element

I am trying to display control buttons at the top of a table cell when hovering over an image within the cell. Here is the HTML structure I have: <table id="pridat_fotky"> <tbody> <tr> <td class=" ...

htmlcss

Enhancing the internal styling of ngx-charts

While working on the ngx-charts Advanced Pie Chart example, I noticed that the numbers in my legend were getting cut off. Upon inspecting the CSS, I discovered that a margin-top of -6px was causing this issue: https://i.stack.imgur.com/oSho1.png After so ...

htmlcssangularngx-charts

Pressing a specific button triggers a broadcast signal, prompting a modal window to pop up and display relevant information

Within my website's HTML page named rollup.html, there exists a button that triggers the opening of a modal. <button id="myBtn" ng-click="printDivModal('rollup-tab')">ModalTest</button> In the accompanying JavaScript file, roll ...

htmlangularjstwitter-bootstrapbootstrap-modalbroadcast

Is there a way to search for text and highlight it within an HTML string using Ionic

Welcome everyone! I am currently utilizing Ionic to load an article from a local HTML string. <ion-content padding> <p [innerHTML]="url"></p> </ion-content> The 'url' variable contains the local HTML string. My goal ...

htmltypescriptionic-framework

What is the best way to modify the underline style of a tab in Material UI?

I'm trying to customize the underline of: https://i.stack.imgur.com/J2R1z.png Currently, I am using material ui version 4.12.3 The code snippet for generating my tabs is below: function renderTabs(): JSX.Element { return ( <Tabs className={cla ...

cssreactjstypescriptmaterial-ui