Border dividing vertically of equal length

My goal is to create a table-like appearance in a simple bootstrap grid using the row and col- classes, with vertical dividers that extend the full length of the tallest column.

I have created a demo which shows that traditional methods only allow the divider to be as long as the current column: http://www.bootply.com/8egTicqQAq

I have searched for solutions on similar questions on SO, but none of them worked for me in the latest version of Chrome. However, I am looking for a solution that will work in any modern browser.

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

Apply a display: table style to the .row class, along with display: table-cell and float: none styles to the .col class:

.row {
    width: 100%;
    margin: 2px;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    border-left: solid 1px black;
    border-right: solid 1px black;
    display: table;
}

.row > div[class^=col-] {
    border-right: solid 1px black;
    float: none;
    display: table-cell;
}

.row > div[class^=col-]:last-child {
  border:none;
}

See an example here: http://www.bootply.com/DNBL5ir8dG

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

Bringing Vue Components Together in Laravel: A Guide to Component Importation

Recently, I started learning Vue.js and I am looking to understand how to use component. Unfortunately, when I attempted to import my component into another component, it didn't work as expected. The framework I am currently using is Laravel 5.8 and I ...

javascripthtmlvue.js

Grid of domes, fluid contained within fixed structures and beyond

I've been grappling with this issue for a while now, and have had to rely on jQuery workarounds. I'm curious if there is a way to achieve this using CSS or LESS (possibly with javascript mixins). The page in question consists of both fixed and f ...

javascripthtmlcssgridless

Collecting information from form submissions, accessing data from the database, and displaying the results

I am currently working on a project using nodejs, express, and mongodb within the cloud9 IDE. My goal is to create a page with a form that allows users to input data, search for corresponding information in the database, and display that data on the same ...

javascripthtmlcssnode.jsexpress

css effect of background image transitioning on mouse hover

Is there a way to have an element on my webpage with a background image that follows the movement of the mouse when hovered over? I want it to be similar to this website: This is the HTML code I currently have: <section id="home" data-speed="3" data-t ...

javascriptjqueryhtmlcss

Aligning images in columns

I need help aligning a set of images using CSS. Currently, they are stacked top to bottom and I want them to be placed left to right instead. In simpler terms: 1|2|3|4 5|6|7|8 vs 1|3|5|7 2|4|6|8 #photos { line-height: 0; -webkit-column-count: ...

jqueryhtmlcss

Amend the value in the database

I am looking to adjust a value in my database by clicking on an image on my webpage. Can someone guide me on how to achieve this using JavaScript and AJAX? ...

phpjavascripthtmlajax

Stop Gulp Inline CSS from enclosing HTML content within html and body elements

I need to work on a piece of HTML that I plan to copy and paste directly into an existing document. Here is the code snippet: <div id="someDiv"> </div> <script src="js/someScript.js" inline></script> <style> div#someDiv { ...

htmlgulp

Modify a singular aspect of shorthand background attribute

Imagine using the shorthand background property to define multiple properties. For example: .img { background: url('/Content/images/a.png') no-repeat scroll 100% 3px; } If you need to override just the background-position of the image, sh ...

cssoverriding

Having trouble with the nth-child CSS property in Bootstrap?

My cards need some styling adjustments - specifically, I want the first and third card in each row to have a top margin of 50px. Strangely, this doesn't seem to work with Bootstrap, but it does with pure CSS. Is there a specific class in Bootstrap tha ...

csstwitter-bootstrapbootstrap-4

Tips for utilizing a personalized extension in Visual Studio Code

Embarking on my HTML journey, so please bear with me. I've been watching tutorial videos to get a better grasp of it, and one of the tutorials I'm following shows how to create a resume on GitHub using VS Code. Check out the video here At 3:44 ...

htmlcssvisual-studio-codefonts

The border-radius property in Bootstrap buttons causes unwanted white border artifacts to appear

Strange anomalies in the borders of my Bootstrap buttons caught my attention recently. Upon further investigation, I realized that this issue is not linked to my custom styles or theme, as the artifacts can also be seen on the Bootstrap button documentatio ...

csstwitter-bootstrapbootstrap-4bootstrap-5

Use jQuery to apply CSS to a div only when it becomes visible on the screen

I created a single page HTML with scrolling functionality. The structure of my divs - home and home2 - is as shown below. Both have a height of 100%. I am looking to add CSS to the second div (home2) using jQuery only when it becomes visible to the user in ...

jqueryhtmlcss

Tips for aligning input vertically across rows with bootstrap 5

I'm currently working on a form layout where each row contains a different number of columns, with labels and inputs in each column. However, I'm facing an issue where the start of the input is not aligned vertically for each row. I tried using ...

htmlcssbootstrap-5

Tips for extracting data from an Angular object using the *ngFor directive

https://i.stack.imgur.com/ai7g1.png The JSON structure displayed in the image above is what I am working with. My goal is to extract the value associated with the key name. This is the approach I have taken so far: <span *ngFor="let outlet of pr ...

htmlnode.jsangulartypescript

What are some methods for concealing custom CSS overflow in IE8?

In my latest project, I created a script that utilizes pure css to toggle between an image, image caption, and text. However, when testing it in IE8, all the elements appear at once instead of toggling as intended. To showcase the issue more clearly, I h ...

htmlcssinternet-explorer-8

Using jQuery to reveal and conceal elements upon hover interaction

I have implemented a basic jquery function to display and hide a div when hovering over an anchor. However, the issue I am facing is that the div disappears when I move my cursor away from the anchor tag. I want to be able to interact with the div without ...

jquerycss

Issues with styled-components media queries not functioning as expected

While working on my React project with styled components, I have encountered an issue where media queries are not being applied. Interestingly, the snippet below works perfectly when using regular CSS: import styled from 'styled-components'; exp ...

javascriptcssreactjsfrontendstyled-components

Choosing an element in JQuery based on the value of its style property

I have three divs with the same class but different styles. I need to select only the third one using JQuery. <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-div ...

javascriptjquerycss

Blurry font rendering occurs when an element is scaled using CSS

I want to add a scale animation to a bootstrap button, but the text appears blurry. I've tried all the solutions mentioned here. How can I resolve this issue? Below is the code snippet (text is slightly less blurry in the snippet compared to my pr ...

htmltwitter-bootstrapcssbootstrap-4

Stop right-floating elements from switching positions

Every time I float two elements to the right, they end up getting swapped. This issue doesn't seem to happen with left floated elements and occurs consistently across all browsers. For example: CODE: <style type="text/css"> .right { ...

htmlcsscss-float