Excessive margin between two Bootstrap columns leading to a line break

I am looking to create a layout with 4 columns like the screenshot below, each with a margin around it. The columns are set to col-md-6 with a margin of .5%. However, this margin is causing the columns to break to the next line. I have tried adjusting the flex property from:

flex: 0 0 0 50%;

To:

flex: 0 0 0 49%;

To account for the added margin. Unfortunately, this solution does not work in Internet Explorer.

.services_content,
.services_image {
  border-radius: 20px;
  margin: .5%;
  flex: 0 0 49%;
}
<div class="row">
  <div class="order-sm-0 order-md-1 col-md-6 services_image_1 services_image" style="background: url('<?php echo $servicesImgLink_1;?>">
    <h2 class="service_img_heading">
      <?php the_field('services_heading_1'); ?>
    </h2>
  </div>
  <div id="services_content_1" class=".order-sm-1  .order-md-0 col-md-6 services_content_1 services_content">
    <p>
      <?php the_content(); ?>
    </p>
  </div>
</div>

What would be the most effective method to achieve a full-screen look with a slight margin around these 4 columns?

https://i.sstatic.net/bJWVr.jpg

htmlcssbootstrap-4

Answer №1

Here is a solution that should do the trick. I am currently exploring how to achieve consistent spacing.

.block {
  background: url('https://gmsrp.cachefly.net/images/19/12/18/135acb4a87157a536a861995694f7b79/320.jpg');
  border-radius: 5px;
  height: 120px;
  margin: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="block">

      </div>
    </div>
    <div class="col-6">
      <div class="block">

      </div>
    </div>
    <div class="col-6">
      <div class="block">

      </div>
    </div>
    <div class="col-6">
      <div class="block">

      </div>
    </div>
  </div>
</div>

Answer №2

Create a responsive grid structure using flex.

body {
  color: #404040;
  font: 100 1em/150% "proxima-nova", Helvetica, sans-serif;
}

.wrapper {
  max-width: 1200px;
  margin: auto;
}

h1, h2, h3, h4 {
  font-weight: 900;
  color: #333;
  margin: 1.5em 0 0.5em;
}

...
...
...

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;
  }
  ...
  ...
}
/*===========================================*/
/* CSS Code for Flexbox Grid */
...

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Responsive Flexbox Grid</title>
</head>
<body>
  <div class="wrapper">
    <p>A grid system built with Flexbox.</p>
  <h1>Basic Grid</h1>
    <p></p>
  <div class="Grid Grid--full u-textCenter">
    <div class="Grid-cell"><div class="Demo content-1of1"></div></div>
  </div>
  ...
  ...
</body>
</html>

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

What is the best way to adjust the dimensions of a blank image without altering the size of

I am attempting to set the size of an empty image to 150px. While using float: left works on Firefox, it does not have the same effect on Google Chrome. Here is the HTML code: <div> <img src='some broken url' alt='no image'& ...

htmlcss

What is the best way to rearrange images within a grid container?

I apologize for asking numerous questions, but could someone please guide me on how to position an image slightly to the right of center or just 1 inch to the left of center? http://jsfiddle.net/96d7udd7/ Below is the HTML code snippet: <figure class ...

htmlcssimagealignment

Exploring Selenium with Java: Uncovering the Method to Locate and Identify a Specific Nested Element When Sharing Identical Parent Elements

If I have a page structured like this: <div class = "A"> <h1>AA</h1> <p>This</p> </div> <div class = "A"> <h1>BB</h1> <p>This</p> </div> And each time the page is loaded ...

javahtmlcssselenium

How can I resolve the issue of not returning anything ondrop in my code?

Whenever I drop my div containing an image, I don't see anything. And when I try to access its ID, I get a null value. How can I extract information from a div with an image and append a row with it? For code samples or to check the codepen example, v ...

javascripthtmlsassdrag-and-dropdata-transfer

Numerous Levels of Dropdown Menus

I am looking to implement a feature on a web page where users can select multiple vehicles using JQuery. The idea is that selecting the brand in the first dropdown will populate the second dropdown with the models available for that specific brand. The ...

javascriptjqueryjsonhtml

Encountered an issue while implementing the post function in the REST API

Every time I attempt to utilize the post function for my express rest API, I encounter errors like the following. events.js:85 throw er; // Unhandled 'error' event ^ error: column "newuser" does not exist at Connection.parseE (/Use ...

javascripthtmlnode.jsapiexpress

Solving the Issue of Assigning a Random Background Color to a Dynamically Created Button from a Selection of Colors

Trying to create my own personal website through Kirby CMS has been both challenging and rewarding. One of the features I'm working on is a navigation menu that dynamically adds buttons for new pages added to the site. What I really want is for each b ...

javascriptphphtmlcsskirby

Problem arises with background image scaling and adaptability

Utilizing Magnific Popup for presenting two sections of content side by side has been a bit challenging. The left section features a div with a background image that varies in size, causing issues with responsive styling to fit the containers properly. Cu ...

htmlcssresponsive-designmagnific-popup

Issue with JQuery Sortable's "sortupdate" event triggering repeatedly after sortable is destroyed and re-initialized

Implementing a jquery sortable event to manage a list can be done with the following code: $('.filegroups').sortable({ items: ".filegroup", containment: "parent" }); $(".filegroups").on("sortupdate", function (event, ui) { ... }); The event fun ...

javascriptjqueryhtml

The XPath for pagination is incorrect

Whenever I try to navigate to the next page, I keep encountering an error from the robot. Can someone help me construct the xpath using either of these snippets: <li title="2" class="ant-pagination-item ant-pagination-item-2" tabind ...

cssseleniumxpathrobotframework

NodeJS is facing a severe challenge in properly rendering HTML and its accompanying CSS code, causing a major

Once upon a time, I built a beautiful website while practicing HTML, CSS, and JS. It had multiple web pages and used Express for the backend. Unfortunately, I lost all the files associated with it and took a break from web programming for some time. Now, w ...

javascripthtmlcssnode.jsexpress

Verification cannot be completed with the bootstrap modal

I want to implement the use of a bootstrap modal when submitting form data. However, I do not want the form to be submitted if it is empty. Currently, when I try to trigger the bootstrap modal on submit with an empty form, the modal appears instead of prom ...

javascriptjqueryhtmltwitter-bootstrap

The slides on SlickJS are initially loaded in a vertical alignment, but once the arrows are interacted with,

I've put together a demonstration that highlights the issue I'm facing. Upon visiting the contact section, you'll notice that all the slickJS slides are stacked vertically initially, but once you interact with them by clicking on the arrow o ...

javascripthtmlcssbootstrap-4slick.js

What is the best way to ensure that a nav-item is the correct width to display its content in a single line?

I want to ensure that my nav-item elements have enough width to display their content on a single line, as currently the content is wrapping onto two lines: Sample Code: https://jsfiddle.net/tavyhkem/2/ <ul class="navbar-nav mt-2 mt-lg-0"> ...

htmlcsstwitter-bootstrapbootstrap-4

How can I create an HTML select dropdown menu with a maximum height of 100% and a dynamic size?

The dropdown menu I created using an HTML select tag contains a total of 152 options. However, the large number of options causes some of them to be out of view on most monitors when the size is set to 152. I attempted to limit the number of displayed opti ...

javascriptjqueryhtmlcss

Issue with Jquery functionality in Sharepoint Script Editor

I'm currently working on a project where I need to showcase a SharePoint list within a Bootstrap data table. While the list is being displayed correctly, I encountered an issue when I added the class for Bootstrap data tables - the table did not show ...

jqueryhtmlbootstrap-4sharepoint-online

The Carousel feature in Bootstrap 4 is malfunctioning on the website

I've inserted a carousel into my webpage but it's not functioning as intended. I'm attempting to use this carousel code from "codepen.io/decibeldesign/details/bMrQKN" and the full webpage code can be found at "paste.ofcode.org/saJPkuhPPixFmX ...

htmlbootstrap-4carouselejscodepen

What is the process for inserting a hyperlink onto an image within a query slider?

I am experiencing difficulties when attempting to add hyperlinks to the images in my slider. I have come to understand that images cannot be clickable in jQuery sliders, so I have tried the following in the HTML: <div class="wrapper"> <div class= ...

jqueryhtmlcss

Pictures in the portfolio failing to load on Mozilla Firefox

Having some trouble with my WordPress website bmfconstruction.com.au/new/. In the project section, all images are loading correctly in Chrome, Opera, and IE. However, when it comes to Firefox, none of the images seem to be showing up. I've tested this ...

javascriptcsswordpressimagefirefox

Start fresh with the count for every individual table

In my HTML document, I have multiple tables with columns that have classes "valuation" and "valuation_all". If one cell in the "valuation" column contains the text "FAIL", then the corresponding cell in the "valuation_all" column should display "FAIL"; oth ...

htmljquery