Avoid duplicate borders on columns that adjust their size based on the screen width

Picture yourself utilizing Bootstrap 4 and displaying various cells, each with unpredictable numbers.

.cell {
  border: 1px solid black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</div>

Upon executing the code, you may notice "double" borders appearing in the layout. Addressing this issue requires meticulous calculation of breakpoints for nth-child selectors due to varying cell alignments on different devices. How would you approach resolving this matter?

csstwitter-bootstrapbootstrap-4border

Answer №1

If you want to achieve this effect, you can implement it as shown below: https://www.example.com/code-example

.row {
    border-style: solid;
    border-color: black;
    border-width: 1px  0   0  1px;
}

.cell {
    border-color: black;    
    border-style: solid;
    border-width: 0  1px 1px  0;
}

This code snippet adds a top and left border to the entire row, while giving each cell right and bottom margins. The same result can also be achieved using the border utility classes.

<div class="row no-gutters border-left border-top">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
</div>

Answer №2

To create a border effect on your element, you can use border-right/border-bottom, and on the container, you can use border-top/border-left:

.cell {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.row {
  border-top: 1px solid black;
  border-left: 1px solid black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</div>

If you have fewer cells and want to explore a different approach, you can try this hack using pseudo-elements:

.cell {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  position:relative;
  z-index:1;
}
.row {
  border-left: 1px solid black;
  margin:10px;
  overflow:hidden; /*hide the overflow*/
  padding-top:1px; /*for the top border*/
}

/* Apply styles for top borders */
.cell:first-child:before {
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  height:1px;
  width:100vw;
  background:#000;
}

/* Hide unwanted top border for few cells */
.cell:last-child:before {
  content:"";
  position:absolute;
  bottom:100%;
  left:calc(100% + 1px);
  height:1px;
  width:100vw;
  background:#fff;
}

/* Adjust stacking context for cells and pseudo-element */
.cell:first-child,
.cell:last-child {
  z-index:auto;
}

/* Specific styling for one cell scenario */
.cell:first-child:last-child {
  border-top:1px solid;
}

.cell:first-child:last-child:before {
  content:none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</div>

<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</div>

<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</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

Regain the original properties after implementing a universal CSS reset

Working with older code that I must build upon always reminds me of the drawbacks of using global CSS resets. I have this outdated foo.css file that begins with * {margin:0; padding:0;} In the past, I would duplicate it to a new file called bar.css, ma ...

htmlcsscross-browserbackwards-compatibilitylegacy

The hover CSS effect in the dropdown menu does not apply to sibling elements, but does work on descendant elements

Below are two sets of code for creating a dropdown menu. Although similar, the codes have a slight difference. In both cases, I have assigned classes to the main list item and submenu. The main heading has been given the 'heading' class with an a ...

htmlcssdrop-down-menu

The div element is not extending all the way to the left side of the browser window

I'm having trouble positioning a menu at the top of my webpage following a tutorial. The menu icon doesn't seem to reach all the way to the left side of the page. Despite multiple attempts to adjust the margin and padding settings, I can't ...

htmlcss

Conflicts in SwiperJS Timeline Management

Having a Timeline on my Website using SwiperJS presents challenges with conflicting functions. The goal is to navigate swiper-slides by clicking on timespans in the timeline. The desired functionality for the timeline includes: Sliding to the correspondi ...

javascripthtmlcssfrontendswiper.js

`Why is the color of the <select> element not changing in Firefox?`

I seem to be facing some difficulty replicating this issue accurately. However, I do have a jsfiddle link where the selected text color does not match the selected option text. http://jsfiddle.net/kralco626/9xJvF/8/ (similar to: seting <select> col ...

htmlcssfirefoxgoogle-chromeinternet-explorer-8

Implementing dual backgrounds in CSS

I am trying to achieve a gradient background for li elements along with different image backgrounds for each individual li. Is there a way to accomplish this? List of items: <div id="right_navigation_container"> <ul> <li id ...

htmlcss

Steps to insert a style tag into the head using an AngularJS directive

Greetings! Users have the option to choose between printing reports in landscape or portrait format. I am interested in finding out if it is feasible to incorporate the following code snippet into the header of a web document using an AngularJS directive. ...

angularjscssangularjs-directiveangularjs-service

Adjusting the height of the Tinymce Editor in React Grid Layout after the initial initialization

I am facing a challenge with my React Component that displays a tinymce editor. The task is to dynamically adjust the height of the editor after it has been initialized. To achieve this, I am utilizing the "React Grid Layout" package for resizing the compo ...

javascriptcssreactjstinymcereact-grid-layout

How to ensure the right size for your sections in HTML5

I am currently learning HTML5 and attempting to create a specific sized section in the browser where various elements like buttons and text will be displayed based on user interaction. However, I am running into an issue with adjusting the size of the sect ...

csshtml

Achieving a 100% height sidebar that remains visible on the screen at all times in Bootstrap

Looking to achieve this specific layout: I want the left col-md-3 to maintain a consistent 100% height and always be visible on the screen - it's going to be a menu. The right side should function normally with scrolling capabilities. Appreciate any ...

csstwitter-bootstrap

Create a customized HTML popup featuring various packages

I am struggling to create an HTML popup within a React component due to some errors Here is the code snippet: <div> <button class="toggle">Button</button> <div id="link-box"> <ul> ...

htmlcssreactjs

Using Javascript to trigger a setTimeout function after the user's mouse leaves

There is a div that pops up when the user's mouse exits the webpage, containing a survey pertaining to my website. I want to avoid prompting users to take the survey if they move their cursor out of the page within the first few minutes of browsing. ...

javascriptjqueryhtmlcss

How to preserve alternating row styles when exporting Angular Data Table to Excel with .withButtons?

Utilizing Angular DataTable to display a list of data, with alternate row background color and border styles defined. An issue arises when exporting the Data table to excel as the alternate row style and border styles are lost. Only the raw data is includ ...

cssangularjs

Tips for effectively utilizing the overflow:auto property to maintain focus on the final

I am working on a Todo App and facing an issue where the scrollbars don't focus on the bottom of the page when adding a new element. How can this problem be resolved? https://i.stack.imgur.com/IzyUQ.png ...

javascriptcsselectronstyles

What is the method for including a Bootstrap Icon within a placeholder text?

I am attempting to insert a search icon inside an input text field, but I am unsure of how to accomplish this. My desired result is similar to: input search Can Bootstrap Icons be used within a placeholder? I have seen some examples, but the icon remaine ...

htmlcssbootstrap-4icons

How can you ensure an element's height matches its width within an Ionic framework?

I am currently creating an application using the Ionic framework, and I am looking to set a square image as the background. The challenge is to ensure that the image scales appropriately for different screen resolutions; ideally, it should occupy the full ...

javascriptcssangularjsangularjs-directiveionic-framework

When I upload the landing page through cpanel, none of my CSS files appear to be active

I am having an issue with my webpage at . Everything looks great when I view it on my local host, but once I upload it, the CSS files and images are not loading properly. Can anyone assist me with this problem? ...

htmlcsssasscpanel

Overlap of Navigation and Logo Divs on Mobile Website

Trying to optimize my website for mobile at coveartschildcare.com, but the header divs keep overlapping and nothing I do seems to fix it. Here's the CSS code I'm currently using: @media only screen and (min-device-width: 320px) and (max-devi ...

htmlcssmobileoverlapping

Is your Chrome DevTools changing CSS Link files to "Constructed Stylesheet" after you edit the CSS using Inspect Element? Find out how to fix this issue!

This issue relates to CSS files that are initially not identified as constructed stylesheets but end up being displayed as such after editing, rendering the file inaccessible. Specifically in Google Chrome DevTools (last observed in Chrome 86): Whenever ...

cssgoogle-chromegoogle-chrome-devtoolsinspect-element

Is it possible to generate distance between 2 elements without utilizing padding or margin?

In my React Native project, I'm currently working with 2 inline buttons - the search and add buttons: https://i.stack.imgur.com/tKZrf.png I'm looking to add some spacing between these buttons without impacting their alignment with the left and ...

javascriptreactjscssreact-native