Creating space between columns without the use of left and right gutters

I needed to adjust the spacing between columns, but the solution I found caused an overflow issue. I want to fix this overflow problem without using overflow: hidden because it conflicts with other components:

.row {
  margin: 0 -25px;
}

.col {
  padding: 0 25px;
  min-width: 0;
}

div {
  overflow-wrap: break-word;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid p-0">
  <div class="row">
    <div class="col">
      <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooong text</div>
    </div>
    <div class="col">
      <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
    </div>
  </div>
</div>

Check out this Pen for reference: https://codepen.io/frouo/pen/OqGaWN

csstwitter-bootstrapbootstrap-4

Answer №1

Set up a parent div and style it with CSS

Below is your HTML code with a parent div named 'content-div'

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid p-0">
  <div class="row">
    <div class="col">
            <div class="content-div">
                <div class="w-100 p-3 border bg-light">Long text here</div>
            </div>
    </div>
    <div class="col">
            <div class="content-div">
                <div class="w-100 p-3 border bg-light">Even longer text goes in this box</div>
            </div>
    </div>
  </div>
</div>

This is the CSS for '.content-div'

.content-div {
  padding: 0 25px;
  max-width: 150px;
}

Please avoid applying CSS directly to bootstrap classes

Answer №2

I have made adjustments to remove the first and last padding as well as the no-gutters class. While this solution works, I am open to suggestions on how to better align with Bootstrap's design principles!

div {
  overflow-wrap: break-word;
}

[class^="col-"]:first-child>div {
  padding-left: 0 !important;
}

[class^="col-"]:last-child>div {
  padding-right: 0 !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid p-0">
  <div class="row no-gutters">
    <div class="col-3">
      <div class="w-100 p-3 border bg-light">Long text goes here</div>
    </div>
    <div class="col-3">
      <div class="w-100 p-3 border bg-light">Even longer text goes here</div>
    </div>
    <div class="col-6">
      <div class="w-100 p-3 border bg-light">The longest text goes here</div>
    </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

Is there a way to trigger two distinct CSS transitions simultaneously with a single click?

Below is a script that rotates two images in opposite directions when clicked. One image spins clockwise while the other spins counter-clockwise. The challenge is that each image requires an individual click to rotate. My goal is to make both images rotate ...

jquerycss

Looking to organize my divs by data attributes when clicked - how can I achieve this with javascript?

I am looking to implement a dropdown sorting functionality for multiple divs based on different data attributes such as price and popularity. The specific divs are labeled as "element-1" and are contained within the "board-container". var divList = $(". ...

javascriptjqueryhtmlcss

Tips for resolving the final item issue in Owl Carousel when using right-to-left (RTL)

Encountering a bug with the rtl setting in owl-carousel. When the rtl is applied to the slider and I reach the last item, the entire slider disappears! Here's the code snippet: var viewportWidth = $("body").innerWidth(); if (viewportWidth & ...

javascripthtmljquerycssowl-carousel

New to the world of web design and seeking answers as to why my style is not being applied

After diligently following the courses on CodeAcademy (I know, kind of lame but it's a start), I finally feel confident in my ability to write my own HTML and CSS code. However, when I tried to do so using Sublime Text 3 and opened my HTML file, I not ...

htmlcss

Arrangement of content in three columns with a flex direction set to column

In my current project, I am working on creating a view of items that are mapped using React. The main objective is to set up a 3-column layout with items arranged vertically within each column. Each item panel contains a hidden div element which expands wh ...

cssbootstrap-4flexboxcss-gridmasonry

When using jQuery, hover over an li element while ignoring its children

I'm working on customizing a Wordpress menu that has a submenu. I managed to add an arrow to the 'li' element that contains a submenu, and created a hover animation with CSS when the mouse moves over the 'a' tag inside the 'li ...

javascriptjqueryhtmlcsswordpress

Dynamic Cell Class Assignment in Ag Grid

My Div's dimensions can change based on user interaction, with the div containing an ag-grid component. Initially, the div/grid loads in a compressed size, so I've applied specific classes (like small font-size, height, padding, etc.) to eliminat ...

htmlcssangularag-gridag-grid-ng2

Achieving a transparent inner box-shadow effect on hover: a step-by-step guide

Is there a way to make the black ring transparent upon hover by changing box-shadow: 0 0 0 5px #000, 0 0 0 10px green to box-shadow: 0 0 0 5px transparent, 0 0 0 10px green? It doesn't seem to be working for me. Any suggestions on how to achieve this ...

javascripthtmlcss

Autofill functions may not be compatible with input fields generated using JavaScript

Having trouble with browsers not using autocomplete in login overlays generated with JavaScript? It can be really annoying. Any suggestions on how to fix this issue? Should I create a hidden form within the original HTML and then move it into the overlay? ...

javascripthtmlcss

Adding a class name to the three active, visible, and shown slides in SwiperJS is a simple process that can be done by

Currently, I am working on customizing a carousel in Swiper with slidesPerView={3}. My goal is to style the sliders that are not visible on the screen. I have made multiple attempts to achieve this: First, I tried adding the attribute slideActiveClass="sw ...

cssnext.jsslidercarouselswiper.js

Using the scroll feature within the tooltip component in React with @material-ui/core/Tooltip can cause the entire page to

I am currently working with a tooltip created using the @material-ui/core/Tooltip library, and it is functioning correctly. You can see an example of the tooltip in action at this link: https://codesandbox.io/s/kgccc. https://i.stack.imgur.com/fMgGb.png ...

cssreactjsscrollmaterial-uitooltip

Issues with loading Angular 4 Bootstrap JS post compiling

Utilizing normal bootstrap 3 within an Angular 4 application has been working well when compiling for development using ng serve. However, upon building the application with ng build, I encounter an issue where my bootstrap.js fails to load. Below are th ...

twitter-bootstrapangularangular-cli

Tips for validating a reactive form with Bootstrap styling

Here is a simplified version of my code: <div class="tab " *ngIf="booking"> <div class="confirmation-email card" *ngIf="showConfirmationEmailForm" id="confirmationEmail"> <div class=" ...

angularformsvalidationbootstrap-4

What is the best way to remove CSS styling from a select element?

My select element is displaying blank option values no matter what I do. The dropdown has the correct number of options, but they are all empty. Here's the HTML snippet: <label for="accountBrokerageName">Brokerage:</label> <se ...

htmljquerycss

To activate two separate click events, one for an absolute element and another for the element positioned behind it, simply click on the desired absolute element to trigger both actions

Is it possible to trigger click events for both of these elements? position: relative container ELEMENT 1: standard div ELEMENT 2: position: absolute div In real life, element 2 is a transparent backdrop designed to capture clicks on top of the header ...

javascripthtmlcssreactjs

What steps can be taken to adjust the alignment of a Bootstrap Dropright menu so that it opens in an upward direction instead of the standard downward

My dropdown menu is dropping towards the right correctly, but it is going downwards and getting hidden under my page. I want it to open upwards instead of downwards. I attempted to adjust the CSS, adding bottom:0 to the dropdown-menu, but unfortunately, i ...

htmlcssdrop-down-menubootstrap-4

Tips for showing just one table data cell (<td>) with identical class:

I'm facing a challenge with jQuery, HTML, and CSS. I'm currently in the process of designing a website for a railway company. The Home page is completed, but I've hit a roadblock on the tickets page. Using just HTML, CSS, and jQuery to build ...

htmljquerycss

Enhance your website's user experience by implementing Bootstrap breadcrumb styling integrated

I am a beginner with bootstrap and currently trying to customize the breadcrumb styling. I attempted the following code which resulted in the desired inline layout. <div class="BreadCrumbs"> <a href="www.yahoo.com" >Yahoo</a&g ...

htmlcsstwitter-bootstrap

Issues with CSS preventing proper display on mobile devices like iPad and iPhone

My designer recently converted a PSD file, but for some unknown reason, the webpage is not displaying correctly on iPhones or iPads. The only visible element is the div that contains a feedback link. I have been troubleshooting this issue for a while now ...

iphonehtmlcssipad

"Adjusting the font size in a blogger's photo caption: A quick guide

I recently switched templates for my blog and I'm having trouble adjusting the size of the caption text under the photos. The template I'm currently using is called Awesome Inc. If you need more information, you can visit my blog here: https:// ...

htmlcss