Tips for displaying gaps between three divs while ensuring they remain aligned in a single row

I am currently working on HTML code that is intended to display 3 divs side by side using Bootstrap syntax:

.main-background {
  background-color: white;
  padding-top: 40px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 20px;
}

.main-Image {
  display: flex;
  padding-bottom: 40px;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: white;
  box-sizing: border-box;
}

.main-h3 {
  align-items: center;
  background-color: #fff;
  font-family: Lora, sans-serif;
  color: #162b3b;
  font-size: 24px;
  line-height: 1.5em;
  font-weight: 400;
  text-align: center;
  display: flex;
  padding: 10px 40px 40px;
  -webkit-box-align: center;
  box-sizing: border-box;
}

.main-footer {
  font-family: 'Source Sans Pro', sans-serif;
  color: #162b3b;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  box-sizing: border-box;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="row ">
  <div class="col-xl-4 main-background">
    <div class="main-Image">
      <img src="~/img/How_It_Works_Personalized-1.jpg" loading="lazy" sizes="(max-width: 479px) 93vw, 250px" width="250" />

    </div>

    <div class="main-h3">
      1. Personalized Recommendations

    </div>


    <div class="main-footer">
      Receive practice-specific, data-driven recommendations and care plans
    </div>
  </div>
  <div class="col-xl-4 main-background">
    <div class="main-Image">
      <img src="~/img/How_It_Works_Personalized-1.jpg" loading="lazy" sizes="(max-width: 479px) 93vw, 250px" width="250" />

    </div>

    <div class="main-h3">
      1. Personalized Recommendations

    </div>


    <div class="main-footer">
      Receive practice-specific, data-driven recommendations and care plans
    </div>
  </div>
  <div class="col-xl-4 main-background">
    <div class="main-Image">
      <img src="~/img/How_It_Works_Personalized-1.jpg" loading="lazy" sizes="(max-width: 479px) 93vw, 250px" width="250" />

    </div>

    <div class="main-h3">
      1. Personalized Recommendations

    </div>


    <div class="main-footer">
      Receive practice-specific, data-driven recommendations and care plans
    </div>
  </div>

</div>

At the moment, the 3 divs are displaying aligned together like this:

https://i.sstatic.net/z4tlM.png

Now I want to introduce some horizontal space between these divs without causing the last div to wrap onto a new row. If I try adding margin-left and margin-right to the middle divs, it results in the last div moving to a new line!

htmlcssbootstrap-4

Answer №1

If you're looking to achieve a specific layout, utilizing the code snippet below with flex-wrap:nowrap !important; should do the trick.

This will prevent the content from wrapping onto the next line.

.row {
  display:flex;
  flex-wrap:nowrap !important;
  background-color:red;
  justify-content:safe center;
}

.main-background {
  background-color:#ddd;
  padding-top: 40px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 20px;
  margin-left:15px;
  margin-right:15px;
  width:auto;
}

.main-Image {
  display: flex;
  padding-bottom: 40px;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: white;
  box-sizing: border-box;
}

.main-h3 {
  align-items: center;
  background-color: #fff;
  font-family: Lora, sans-serif;
  color: #162b3b;
  font-size: 24px;
  line-height: 1.5em;
  font-weight: 400;
  text-align: center;
  display: flex;
  padding: 10px 40px 40px;
  -webkit-box-align: center;
  box-sizing: border-box;
  justify-content:center;
}

.main-footer {
  font-family: 'Source Sans Pro', sans-serif;
  color: #162b3b;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  box-sizing: border-box;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="row ">
  <div class="col-xl-4 main-background">
    <div class="main-Image">
      <img src="https://asia.olympus-imaging.com/content/000107507.jpg" loading="lazy" sizes="(max-width: 479px) 93vw, 250px" width="250" />

    </div>

    <div class="main-h3">
      1. Personalized Recommendations

    </div>


    <div class="main-footer">
      Receive practice-specific, data-driven recommendations and care plans
    </div>
  </div>
  <div class="col-xl-4 main-background">
    <div class="main-Image">
      <img src="https://asia.olympus-imaging.com/content/000107507.jpg" loading="lazy" sizes="(max-width: 479px) 93vw, 250px" width="250" />

    </div>

    <div class="main-h3">
      1. Personalized Recommendations

    </div>


    <div class="main-footer">
      Receive practice-specific, data-driven recommendations and care plans
    </div>
  </div>
  <div class="col-xl-4 main-background">
    <div class="main-Image">
      <img src="https://asia.olympus-imaging.com/content/000107507.jpg" loading="lazy" sizes="(max-width: 479px) 93vw, 250px" width="250" />

    </div>

    <div class="main-h3">
      1. Personalized Recommendations

    </div>


    <div class="main-footer">
      Receive practice-specific, data-driven recommendations and care plans
    </div>
  </div>

</div>

EDIT FOR MOBILE

For mobile users, an update has been made to allow for better user experience:

@media (max-width:768px) {
.row {
  flex-wrap:wrap !important;
}
}

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

Error in Layout of Navigation Panel and Tabbed Pages

Working on a school project, I encountered a challenge. I found two useful solutions from the W3 website - a sticky navigation bar and the ability to include tabs on a single page for a cleaner presentation of information. However, when trying to implement ...

javascripthtmlcssformattinguinavigationbar

The moment a file is uploaded from an HTML page, control is passed on to the servlet

Trying to incorporate file upload functionality in my application, I have implemented the following code in my HTML: <form action="http://localhost:8080/demo/Upload/a" method="post" enctype="multipart/form-data"> <input type="text" name="descript ...

javajavascripthtmlajaxservlets

Unable to define attributes of a non-existent element (specifically 'innerHTML') within a Vanilla JavaScript component

Currently, I'm developing a Vanilla JS Component and encountering a challenge with utilizing the innerHTML() function to modify the text within a specific ID in the render() HTML code. The problem at hand is the Cannot set properties of null (setting ...

javascripthtml

Adjusting image sizes in WordPress using CSS and HTML

I am currently working on a blog using the Marlene theme on Wordpress. For my posts, the default image resolution is 835x577, which suits my needs perfectly (see example post). However, I also have a "News" page where I want to display a list of all news ...

phphtmlcsswordpress

Tips for aligning content in the Login Screen of Framework7?

I've been working on a cross-platform mobile application with Framework7. For the login screen, I followed a tutorial from https://www.tutorialspoint.com/framework7/login_screen_start_app.htm Here is the code snippet of my index.html with the login m ...

htmlcsscordovahtml-framework-7

Position filter forms on the left side to align with bootstrap cards

I'm having trouble aligning the cards using Bootstrap's row and col- classes. The first three are behaving as expected, but the fourth one isn't cooperating. Any idea why this might be happening and any solutions you can suggest? View the i ...

htmlcssangularsassbootstrap-5

Prevent HTML escaping inside of a code tag in JavaScript

Is there a way to search for tags "<" and ">" within a <code> block, setting them as text instead of HTML so that all tags and HTML can be displayed on the page? Currently, when I use jQuery to do a string replace, all tags are coming through ...

jqueryhtmlstringescaping

Difficulty in adjusting the height of the popover menu that appears when using the Select Validator in Material UI

I am having trouble adjusting the height of a popover that emerges from a select validator form in Material UI. Despite attempting various methods, including adding the following CSS to the main class: '& .MuiPopover-paper': { height: &apos ...

javascriptcssreactjsweb-applicationsmaterial-ui

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

Ensure the unordered list (ul) remains fixed in place

Is there a way to make my left menu, which is a ul, stay static on the screen so that the full menu always appears when I scroll? I attempted to set 'position: fixed; top: 0, left: 0' but it caused the div next to the ul to shift on top of the u ...

javascripthtmlcss

JavaScript struggles when dealing with dynamically loaded tables

I am currently working on integrating the javascript widget from addtocalendar.com into my website. The code example provided by them is displayed below. Everything functions as expected when I place it on a regular page. However, I am facing an issue wher ...

javascriptphpjqueryhtmlajax

Aligning buttons in the navbar using Bootstrap 4

I am faced with a challenge involving two buttons, "login" and "sign up," in a bootstrap navbar. I want these buttons to align horizontally on larger screens and vertically with full width on tablets or mobile devices. Despite my efforts using a combinatio ...

twitter-bootstrapbootstrap-4

Encountered a problem when attempting to access an element on a PHP page using

My javascript code is supposed to retrieve information from a specific URL (song.php) which contains the name of a song. However, there seems to be an issue as the javascript is not extracting the required data. Below is the HTML element and javascript fo ...

javascriptphpjqueryhtml

Exploring the inner workings of flexbox and how it handles overflow situations

Let me start by saying I'm not a frontend programmer, but sometimes you have to become one when the situation calls for it. I've been pondering the behavior of flex or flexbox lately. If my usage is incorrect, please feel free to point it out to ...

htmlcssflexbox

What steps should be taken to transform a transposed table into one that can be scrolled horizontally?

In the process of creating a comparison table for products, I have designed a table with vertical rows. The header is positioned on the left side, with two or more product descriptions displayed in vertical rows within the table body. To accommodate a scen ...

htmlcsshtml-tablehorizontal-scrolling

Unable to place the div/ul above a preceding div

I am having trouble setting up a menu of tabs. I want it to move up so that it is positioned just above the previous div. However, every time I try to move it up, it ends up going underneath the previous div. I have attempted to change the z-index but with ...

htmlcsscss-position

Troubleshooting: Bootstrap PopoverX functions failing

I've been attempting to make the bootstrap extension popover X function properly () I created a JS fiddle (http://jsfiddle.net/wp80d5ux/2/), but unfortunately, the popover doesn't appear to be loading. Here is the example I have: Could it be t ...

javascriptjquerybootstrap-4popover

Creating a main navigation menu

In search of: creating a basic links/navigation bar. My CSS snippet: .ico { width:40px; } The HTML code I currently have: <body> <div id="logo"> <img src="logo.png" id="test" /> <img class="ico" src="images/home.png" /> ...

htmlcss

Is there a way to stop ng-repeat in AngularJS 1.2 from encoding or escaping my content, or do I have to create my own directive for this?

Is there a way to stop ng-repeat in AngularJS 1.2 from encoding or escaping my content without creating a custom directive? I know that ng-bind-html-unsafe is no longer supported in Angular 1.2, but I'm unsure about its compatibility with ng-repeat. S ...

javascripthtmlangularjshtml-encode

Steps for implementing CSS styles following a specific tag

My HTML code includes a <div id="content">, with various elements within it: <div id="content"> <main> <h2 > Example Title</h2> <p>Hello World</p> <table class="table table-striped table-responsi ...

javascripthtmlcss