What is the best way to remove the right border from the final column and eliminate the bottom border from the last row within bootstrap columns?

My attempts to remove the border-right for the last column and border-bottom from the last row of bootstrap columns using nth-child elements have been unsuccessful. I have provided the js fiddle code below:

.col-xs-3 p:nth-child(-n+3) {
  border-bottom: 1px solid #ff0000;
}

.col-xs-3 p:nth-child(3n+1) {
  border-right: 1px solid #ff0000;
}

.col-xs-3 {
  padding: 0
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
       ... (additional rows/columns)
  </div>
</div>

I am looking for a solution to remove the borders as shown in this screenshot: . Any suggestions?

htmlcssbootstrap-4

Answer №1

To achieve this, follow the steps below:

.col-xs-3:nth-last-child(n+6) p {   /* ignore the last 5 elements and begin with the sixth */
  border-bottom: 1px solid #00ff00;
}

.col-xs-3:not(:nth-child(4n + 4)) p { /* exclude the last item in each row (each row has 4 items) */
  border-left: 1px solid #00ff00;
}

.col-xs-3 {
  padding: 0!important;
}
p {
  margin:10px!important;
  padding:5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <p>Content for this column</p>
    </div>
    <div class="col-xs-3">
      <p>Content for this column</p>
    </div>
    <div class="col-xs-3">
      <p>Content for this column</p>
    </div>
    <div class="col-xs-3">
      <p>Content for this column</p>
    </div>
    <div class="col-xs-3">
      <p>Content for this column</p>
    </div>
    <div class="col-xs-3">
      <p>Content for this column</p>
    </div>
  </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

Manipulating child classes using jQuery

I am struggling to display an X icon next to a tab on my page when the tab is clicked, but I am facing difficulties in toggling its visibility. The issue arises when trying to access the span element within the tabs. $('.tabs .tab-links a').on(& ...

javascriptjqueryhtmlcss

What is the best way to keep track of the number of checked checkboxes and add them to a separate div?

I need to select multiple checkboxes from different sections, count them, and then append the same number of sections to another div. ...

javascriptjqueryhtml

How can I create a more spacious and stylish JTextField for my address bar?

I am working on developing my Java skills by creating a custom browser. Is there a way to adjust the size and shape of the address bar, which is currently implemented as a JTextField with Swing's default settings? Here is the code snippet I am using: ...

javajavascriptcssswingjframe

Escaping an equal sign in JavaScript when using PHP

I am currently working on the following code snippet: print "<TR><TD>".$data->pass_name."</TD><TD><span id='credit'>".$data->credit_left."</span></TD><TD><input type='button' val ...

phpjavascripthtmlajax

No information was retrieved from the Wikipedia server after sending an HTTP request

I have been trying to fetch HTML using code. It works perfectly fine when fetching from "http://www.google.com," but when attempting to fetch from "http://en.wikipedia.org/w/api.php," I am not getting any results. Any ideas on what might be causing this i ...

javahtmlhttp

the mystical powers of z-index

I am working on a typical menu structure (ul>li>a) and my goal is to add background effects like shadow and gradient into an <li> element (ul>li>.shadow-bg-white). The challenge I'm facing is that when hovering over the items from ri ...

css

Unable to determine the data type of the JSON object during the

I'm having trouble reading an Object type of json... Here is the json I'm working with: body: { "111": { "name": "name1", "status": 10000 }, "222": { "name": "name2", "status": 20000 }, "333": ...

htmljsontypescriptangulargetjson

What could be causing the closest() method in my JavaScript code to not locate the nearest class?

I've encountered an issue while dynamically creating new classes with input fields in my project. For some reason, when I try to remove a previous row, nothing happens. Can anyone help me troubleshoot this problem? Here is the JavaScript code that I ...

javascriptjqueryhtmlcss

Looping through Jquery mouse over and mouse out events

I'm a beginner with jquery and I stumbled upon this piece of code that changes the background of a div when you hover over it and revert to the original color on mouse out: (document).ready(function(){ $(".t8").mouseover(function(){ ...

jquerycsshtmlfor-loop

Tips on displaying a progress bar with a percentage for a form submission containing a sizeable base64 encoded image

When a form with a base64 encoded image is submitted, there is a delay in uploading the image. The progress can be seen in Chrome at the bottom left corner as "Uploading(x%).. https://i.sstatic.net/Ju6jA.jpg <form id="resizeImageForm" action="resizeIma ...

jqueryhtml

Angular 8 offers the functionality of a mat-dialog that is both draggable and resizable, providing

In search of a solution to enable both dragging and resizing for a mat-dialog. I have successfully implemented the dragging functionality using cdkDrag (DragDropModule). However, when trying to use resize: booth; in CSS, it seems to conflict with the dragg ...

cssangularangular-materialangular-cdk

What could be the reason for the order property failing to function on divs within a block container?

I have a single container with the CSS property display: block. Inside this container, there are 3 div elements. I attempted to order them as per my code, but it proved to be impossible due to the fact that the container itself is styled as display: block ...

htmlcssflexbox

What is the best way to display matching columns in a table on a single row?

I am looking to display information from my database in a table format. Specifically, I want to only show the Math subject and list the units from UI to the last unit available in the database. Below each unit, I would like to display the corresponding hom ...

phphtmlmysqlsqldatabase

Implementing a delegator with ExtJS 4.1: A step-by-step guide

As a newcomer to javascript, I've recently been tasked with maintaining an application built in Sencha ExtJS 4. One of the components I need to modify is a tooltip feature that displays information when hovering over certain elements. This tooltip app ...

javascriptcssextjsdelegation

Display images in Django using the src attribute pulled from a Python list

I am currently working on displaying a collection of images on my website. I have compiled a list of sources for each image and created a loop in the HTML file to iterate through them. Here is a snippet of the HTML body: <body> <div class="co ...

pythonhtmldjango

Unlock the full potential of ngx-export-as options with these simple steps

Being a newcomer to angular, I am currently working with a datatable to display a set of data. I have successfully implemented the functionality to export the table's data as a PDF using ngx-export-as library. However, when downloading the PDF, it inc ...

javascripthtmltypescriptdatatablesangular6

Tips for eliminating the border radius on select box elements within Bootstrap

I am currently using bootstrap v3.3.1 from the standard directory, and I am facing difficulty in removing the border radius from the select box components specifically in Google Chrome. This particular inquiry is unique because: Despite attempting to mo ...

htmlcsstwitter-bootstrap

Is it possible to customize bootstrap classes for a unique bootstrap css design?

In my MVC4 project, I faced a situation where I had a global.css class with some classes that conflicted with Bootstrap after adding it. To resolve this, I created a new file called bootstrap_migration.css. In this file, I prefixed the Bootstrap classes wi ...

htmlcssasp.net-mvc-4twitter-bootstrap

Event delegation will be ineffective when the target element is nested within another element

After receiving a recommendation from my colleagues on Stackoverflow (mplungjan, Michel), I implemented the event delegation pattern for a comment list. It has been working well and I am quite excited about this approach. However, I have encountered an iss ...

javascripthtmlcss

Utilizing a function argument within the :not() selector

I am currently working towards the objective of selecting all elements in my document except for those within a specific class. This is what I have come up with so far: var x = document.querySelectorAll(":not(.myParameter)"); My aim is to make 'myPa ...

javascripthtml