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

Utilize Cordova to download files and access them within the Cordova framework

Apologies for my lack of knowledge, any guidance or assistance in the right direction would be highly valued. I am working on a small application that retrieves data from an API using json requests. One of the functionalities required is to download a spe ...

htmlcordovajquery-mobile

Is there a way to open an HTML file within the current Chrome app window?

Welcome, My goal is to create a Chrome App that serves as a replacement for the Chrome Dev Editor. Here is my current progress: background.js chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('backstage.html', { ...

javascriptcssjsonhtmlgoogle-chrome-app

How to access the api variable in JavaScript

When attempting to retrieve variables from an API object, I encountered the obstacle of them being nested inside another object named "0" in this particular case. Here is a screenshot from the console: enter image description here Below is the JavaScrip ...

javascripthtmlapijavascript-objectsconsole.log

What is the most strategic way to conceal this overlay element?

Currently, the website I'm developing features a series of navigation elements at the top such as "Products" and "Company." Upon hovering over the Products link, an overlay displays a list of products with clickable links. Positioned at the top of the ...

javascriptjqueryhtml

The webpage is not displaying any results despite using .innerHTML with Ajax

I am currently developing a web application that displays query results using the Google Books API. While my code is functioning, I am encountering an issue where the .innerHTML method does not show any results on the HTML page. Below is the HTML code bein ...

javascripthtmlajax

Issue with HTML form not updating MySQL database with PHP

Oh no, this PHP situation is really confusing me! I've been at it for a month now and this is the kind of challenge I thought I would face four weeks ago. Sigh! I keep getting an "Undefined index" warning, and the database is updating with a date of ...

phpmysqlhtmlcss

Struggling with integrating Bootstrap into a Vue.js application due to a compatibility problem with

I am facing difficulties importing Bootstrap features such as modal in a Vue component that uses installed packages like bootstrap, popper.js, and jquery. I am working with nuxtjs for this project. Unfortunately, when trying to import these features, I en ...

jqueryvue.jswebpackbootstrap-4nuxt.js

Steps icons in the MUI Stepper component can be adjusted to remove the space between line connectors

I'm running into an issue while attempting to build a Stepper component using MUI V5. The problem I am facing is the presence of a gap between the icons and the line connectors. Here's what my current setup looks like: This is the desired outcom ...

cssreactjsmaterial-uiflexboxstyled-components

At what point does the browser begin fetching the background images specified in a stylesheet?

Are images mentioned in a valid CSS declaration with a background-image value downloaded when the stylesheet is parsed or when the declaration is applied on a page? In simpler terms, do I need to download all background images listed in my stylesheet even ...

cssperformance

Using a variety of different font styles within a single sentence

I'm looking to add a title with text in one of my divs, but I want the title to be in 3 different font sizes. Any suggestions on how to achieve this without starting a new paragraph for each size change? Here's an example of what I'm trying ...

htmlcssfont-family

What is the best way to send information from an MVC controller to JavaScript?

Being new to programming, I am working on 2 projects that function as client-server via Rest API. I am looking to create a column chart using data from a List of ID (participant) and Votes (Total votes) obtained from the server's connection with the d ...

javascripthtmljqueryasp.net-mvcasp.net-core

Tips for utilizing state and city dropdown menus in JavaScript multiple times without interfering with other dropdowns

Currently, I am utilizing CodeIgniter to create a dynamic dropdown functionality. The setup involves four select country dropdowns where the state options will populate based on the selected country, and once a state is chosen, the corresponding city optio ...

javascriptjqueryhtmljsonajax

Revealing non-div elements with the CSS hover attribute

I'm looking for a way to utilize the CSS hover property on individual elements within a div in order to affect specific span elements. For example, hovering over "something1" should reveal "text1" and so forth. Is there a way to achieve this without ...

htmlcsshovercss-selectors

Close the ionicPopup by tapping anywhere

Currently, I have implemented an ionicPopup that automatically closes after a certain time limit. However, I am wondering if there is a way to configure it to close with a single or double tap anywhere on the screen instead. While I am aware that setting a ...

cssangularjsionic-framework

Remove Chosen Pictures (Checkbox/PHP/MySQL)

I am currently displaying images from a Database using the following HTML code: <li> <input type="checkbox" id="1" /> <a rel="gallery_group" href="images/big/1.jpg" title="Image 1"> <img src="images/small/1.jpg" alt="" ...

javascriptphpjqueryhtmlmysql

What is the best way to target an input element with a specific ID using JQuery Mobile?

For instance, <input type="button" id="one" value="o" data-role="button" data-inline="true" class="game"/> I aim to utilize this button in a manner where I can access its value using the ID, like for updating the value. Is there a way to reference ...

jqueryhtmlbutton

Problem with Active State of DOM Element

My goal is to create an effect where clicking on a DOM element, specifically a list, will cause the target list to rotate and remain in that position. Describing it can be a bit challenging, so I have provided a visual example of what I'm working on ...

jqueryhtmlcss

Choose the initial offspring from a shared category and assign a specific class identifier

I am trying to figure out how to apply the "active" class to the first tab-pane within each tab-content section in my HTML code. Here is an example of what I'm working with: <div class="tab-content"> <div class='tab-pane'>< ...

javascriptjqueryhtmldom

Enlarging the modal overlay

My Angular/Bootstrap app features a small text area within a modal window that often contains lengthy content exceeding the size of the textarea and modal itself. I am looking to incorporate a button within the modal window that, when clicked, opens a lar ...

javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap

Store the checkbox's data in the database for safekeeping

Hey there, I'm working on saving the value of a checkbox using PHP. The twist is that the value is generated through JavaScript. How can I handle this scenario and save the value using PHP? Checkbox: <input type='checkbox' name='ca ...

javascriptphphtmlcheckbox