Simple steps to increase the gap between columns in Bootstrap 4

I created a container with 3 columns using Bootstrap 4:

  <section id="features">

    <div class="container-fluid">
      <div class="row justify-content-around">
        <div class="col-lg-4 col-md-12 ">
          <i class="fas fa-check-circle"></i>
          <h3>Easy to use.</h3>
          <p>So easy to use, even your dog could do it.</p>
        </div>

        <div class="col-lg-4 col-md-12" >
          <i class="fas fa-bullseye"></i>
          <h3>Elite Clientele</h3>
          <p>We have all the dogs, the greatest dogs.</p>
        </div>

        <div class="col-lg-4 col-md-12">
          <i class="fas fa-heart"></i>
          <h3>Guaranteed to work.</h3>
          <p>Find the love of your dog's life or your money back.</p>
        </div>
      </div>
    </div>
  </section>

https://i.sstatic.net/3GVpO.png

I'm looking to increase the space between these columns without breaking the layout. Adding padding or margins messes up the row structure. How can I achieve this while keeping the items in the same row?

csstwitter-bootstrapbootstrap-4

Answer №1

Utilizing padding within columns is effective with the use of the class px-5. This class allows for padding adjustments ranging from 0 to 5. The 'px' signifies padding on both the left and right sides. Additionally, size breakpoints can be incorporated, such as px-sm-3. For further information on padding in Bootstrap 4, visit https://getbootstrap.com/docs/4.4/utilities/spacing/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
 <section id="features">

    <div class="container-fluid">
      <div class="row justify-content-around">
        <div class="col-lg-4 col-sm-12 px-5">
          <i class="fas fa-check-circle"></i>
          <h3>Easy to use.</h3>
          <p>So easy to use, even your dog could do it.</p>
        </div>

        <div class="col-lg-4 col-sm-12 px-5" >
          <i class="fas fa-bullseye"></i>
          <h3>Elite Clientele</h3>
          <p>We have all the dogs, the greatest dogs.</p>
        </div>

        <div class="col-lg-4 col-sm-12 px-5">
          <i class="fas fa-heart"></i>
          <h3>Guaranteed to work.</h3>
          <p>Find the love of your dog's life or your money back.</p>
        </div>
      </div>
    </div>
  </section>

Answer №2

I highly recommend utilizingFlexfor organizing rows (and columns) of content, as it offers tools for specifying the spacing within and around elements.

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

The Jquery slider panel seems to be stuck open even after I switched its CSS orientation from right to left

I am following up on a previous question, which can be found here. After fixing the jQuery code, I decided to change the panel slider to open from the left side instead of the right. I modified the class from "cd-panel from-right" to "cd-panel from-left". ...

javascriptjqueryhtmlcss

My CSS div seems to be ignoring the max-width property I've set

Update: I believe my code is correct, the skew just caused a slight distortion haha. Apologies for any confusion. I usually consider myself proficient in CSS, but this particular challenge has me questioning that... .creative-container { background ...

htmlcssflexbox

Adjust the width of columns using HTML and CSS

UPDATED: Here is a real-life scenario I am facing: I am trying to adjust the width of columns in my table using inline CSS. Let me provide you with an example: The Table was initially set to 100%, like this: <table width=100% ...> The total number ...

htmlcss

Reordering tabs on a form when a date is selected through the date picker functionality

When using date picker on a form and tabbing out of the date field, the focus automatically shifts to the address bar in Chrome. However, in IE it moves to the first field. Is there a way to prevent this behavior? We need to be able to tab through the fo ...

jquerybootstrap-4

Using Javascript to detect the existence of a class and execute a function or make changes

Hey there, all you amazing folks! I'm currently working on designing my game using Javascript. One of the elements is a box with the ID 'box1'. There's also a hidden button component. I've created a function to alter the class of ...

javascripthtmljquerycss

Placing a Div at One Third of the Height of the Viewport

Hello, I'm looking to enhance the appearance of my website using the rule of thirds. I have a tall div that I would like to position one-third of the way down from the top of the browser window viewport height. This is what I have tried so far, but ...

csspositioning

Why is there excessive whitespace appearing in Internet Explorer 9?

Visit mimictrading.com/index.php When viewed in Firefox, the website displays as intended. However, in IE9, there seems to be a strange space at the top and above the recent topics list. I suspect that it might be related to the 'header' divisio ...

jquerycsslayoutinternet-explorer-9whitespace

Disable the upload functionality for the item in Bootstrap Fileinput

I'm having trouble removing the upload icon from the item box. My goal is to automatically upload all images when I click on the "send" button. Thank you https://i.sstatic.net/3rA4G.png var btns = '<input type="hidden" id= "<?= $csrf[&apo ...

jquerybootstrap-4

When a website is deployed to an application, the process includes MVC bundling and managing relative CSS image paths

When trying to convert relative image paths to absolute paths, there are numerous queries on stackoverflow addressing this issue. For example, take a look at this thread: MVC4 StyleBundle not resolving images This question recommends using new CssRewrite ...

cssasp.netasp.net-mvc-4bundlebundling-and-minification

Having issues with React Nivo tooltip functionality not functioning properly on specific graphs

While using Nivo ResponsivePie to visualize some data, everything is functioning properly except for the tooltip. For some reason, the tooltip isn't appearing as it should. Interestingly, I have a heatmap and a bar graph with tooltips that are working ...

javascriptcssreactjsnivo-react

Steps to add a background image without a border:

I am struggling to insert an image within an anchor tag. <a> <img calss="imageclass"/></a> Whenever I try, a border appears around the image. I have attempted using CSS properties like border: 0 and border-style:none, but nothing seems ...

htmlcssimage

The font family specified in the Materia UI theme is experiencing compatibility issues on browsers that are not Chrome

Having difficulty overriding some elements with a specific font, as it seems to work perfectly on Chrome but not on other browsers like Safari and FireFox. Could there be something overlooked? Below is the code snippet: const customTheme = createMuiTheme( ...

javascriptcssfontsmaterial-uimaterial-design

Issue with ngStyle function in Internet Explorer

Within my Angular 4 application, I have defined styles as shown below: [ngStyle]="{'border': getInterleaveColor(i)}" The following function is also included: getInterleaveColor(auditNumber) { var borderProperties = '2px solid'; ...

javascriptcssangularng-style

Setting the column width and border-top in Highcharts

Hey there, I'm facing an issue with my highcharts diagram. 1) Can anyone help me adjust the column width to match the width of the month area? (I've tried changing "width" in CSS but it's not working) 2) Also, how can I remove all borders ...

javascripthtmlcsshighcharts

A problem arises in Next.js when CSS is not rendering properly during Server Side Rendering

After creating my next.js application using the command npx create-next-app, I realized that the styles from the imported .css files are rendering correctly on Client Side Render but not on Server Side Render. The Next.js documentation states that importe ...

javascriptcssnext.jsserver-side-rendering

Sophisticated filter - Conceal Ancestry

Check out this snippet of my HTML: <td> <a class="button" href="#"> <input id="download">...</input> </a> <a class="button" href="#"> <input id="downloadcsv">...</input> </a> </td> I am ...

javascriptcss

JavaFX text label does not adjust its font according to the CSS file

In my FXML file, the structure is as follows: ... <BorderPane id="header"> <right> <Label styleClass="title" text="A Label" /> </right> </BorderPane> ... I also have a CSS file with the following content: #h ...

cssjavafx

Having trouble with the jQuery toggle functionality not working as expected

I'm implementing a function where a div should increase in height and opacity when clicked, and then revert back to its original state when clicked again. I used the toggle function for this purpose, but the issue is that the button disappears when th ...

javascriptjqueryhtmlcss

Having trouble loading background color or image in three.js

I've been struggling to load a background image or color on my webpage. Despite trying various methods, including commenting out javascript files and checking the stylesheet link, nothing seems to work. Even when I load the three.js scene with javascr ...

javascriptcssthree.js

Separating text for tooltips from the element itself

I'm looking to enhance my website by adding tooltip descriptions to elements based on their CSS classes. While tooltips are usually added using the element's title attribute, I have numerous elements with the same lengthy description and want to ...

javascriptjqueryhtmlcsstooltip