Adjusting the alignment of columns within rows in Bootstrap using fixed pixel widths

I am facing a challenge with a container that needs to have a maximum width of 960px. Inside this container, there is a row with a maximum width of 928px, housing two columns. The left column has a max-width of 576px and the right column has a max-width of 352px. How can I center these two columns so they are perfectly aligned in the middle of the container? And what is the trick with Bootstrap 4?

 <div class="d-flex justify-content-center align-self-center" style="max-width: 960px;">
  <div class="container" style="max-width:960px;">

   <div class="row" style="max-width:928px;">


     <div class="col" style="max-width:576px;"> 
      ... data ...
     </div>

     <div class="col" style="max-width:352px;"> 
     ... data ...
     </div>

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

To illustrate my issue and desired end result, I have created two images. Your assistance with achieving the desired outcome would be greatly appreciated. Current Situation
Desired Result

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you don't require a specified min-width or min-height for the containers and also need them vertically centered, this solution should work effectively

.yellowBg {
  background-color: yellow;
}
  
.tomatoBg {
  background-color: tomato;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex justify-content-center align-self-center" style="max-width: 960px; border: 2px solid black;">
  <div class="row" style="max-width:960px;">
    <div class="col d-flex justify-content-center align-items-center" style="max-width:928px;">
    
      <div class="col d-flex flex-row flex-wrap justify-content-start yellowBg" style="max-width:576px;"> 
        <p> Content goes here </p>
        <p> Content goes here </p>
        <p> Content goes here </p>
        <p> Content goes here </p>
        <p> Content goes here </p>
        <p> Content goes here </p>
        <p> Content goes here </p>
        <p> Content goes here </p>
        <p> Content goes here </p>
        <p> Content goes here </p>
        <p> Content goes here </p>
        <p> Content goes here </p>
        <p> Content goes here </p>
        <p> Content goes here </p>
      </div>
    
      <div class="col d-flex flex-row flex-wrap justify-content-start tomatoBg" style="max-width:352px;"> 
        <p> Additional content goes here </p>
        <p> Additional content goes here </p>
        <p> Additional content goes here </p>
        <p> Additional content goes here </p>
        <p> Additional content goes here </p>
        <p> Additional content goes here </p>
        <p> Additional content goes here </p>
        <p> Additional content goes here </p>
        <p> Additional content goes here </p>
      </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

What is the best way to transform this into a dropdown menu using HTML, CSS, and SCSS?

I am currently in the process of developing a dropdown menu using HTML, CSS, and SCSS. Any assistance would be greatly appreciated. <nav> <div class="nav-container"> <div class="nav-logo"> <a href=&quo ...

htmlcsssassdrop-down-menunavbar

Prevent DIV from shifting upwards while resizing the window

I am in the process of creating a responsive website, and I encountered an issue with a particular DIV that spans 100% width of the body. Whenever I resize the browser window, this DIV moves upwards and covers the one above it. This problem only occurs whe ...

htmlcssbootstrap-4

How can I place a new ThreeJS child element at the front and center of a scene?

I have been working on a webpage that is inspired by the CSS3D molecules sample from ThreeJS's library. You can check out the original sample here. In my project, I am dynamically creating new nodes (atoms) and attaching them to existing nodes. Once ...

javascriptcssanimationthree.js

Struggling to get the day view tab working in Bootstrap Full Calendar

I'm having an issue with my calendar where it's not displaying events from the start time to the end time in the day section, but rather showing them for the full day only. I'm new here and would appreciate any help on this matter. Thank yo ...

phpcodeigniterbootstrap-4

What is the best way to navigate a static dual navigation bar?

I'm currently working with two fixed and responsive navbars. Below is the code I'm using: function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { ...

javascripthtmlcss

Is there a way to automatically load a page?

Is there a way to automatically load another page without clicking on a link? I have a website with PayPal options available, and I want to know if there is a way to load the PayPal code without the need for a click. Can anyone help with this issue? < ...

phpjqueryhtmlpaypal

HTML5 format for credit card expiration date (MM/YY)

I've been attempting to create a regular expression pattern for credit card expiration date input that will produce the format mm/yy So far, I have come across a pattern that uses the format yyyy-mm-dd, as shown below: <input type="text" pattern= ...

regexhtmlformsinput

Adjusting the size of a division element to match the dimensions

Currently, I am still in the process of finalizing the remainder of the page, but I have encountered a minor issue. The problem lies in my image div not matching the height of the container. Although the image itself is the correct size, the image div appe ...

htmlcssfrontend

The addClass, removeClass, and css functions in jQuery are malfunctioning

I stumbled upon this website and I am looking to switch the font color from black to white. I attempted various methods but unfortunately, none of them seemed to work: Implementing jQuery's addClass function (to add a class to the SPAN tag) Uti ...

jqueryhtml

Copying content from one website to another using JavaScript

Currently, I am working on a website which stores data and I require assistance in transferring this data to another site. If you have any suggestions using Javascript or other methods, please let me know. ...

javascripthtmlajaxweb

Creating a feature to display a set amount of div elements at first, then revealing additional elements:

Creating a review system using HTML, PHP, and AJAX allows users to share their opinions on a website. The system is made up of two main scripts: PHP Script: <?php ... code ?> <div class="overall_rating"> <span class="num"><?=num ...

javascriptphphtmlajax

How to Align Navigation Searchbar in Center When Bootstrap is Collapsed

I am attempting to center my search bar when it is collapsed. Currently, it appears like this: As you can see, the links are centered, but not the search bar. This is the existing HTML structure: <!-- Navigation Bar Start --> <div class ...

htmlcsstwitter-bootstrapnavigation

Exploring the world of jQuery and Ajax to retrieve a full HTML framework

I'm a beginner in jQuery and JavaScript programming. While I've managed to use jQuery for my Ajax calls, I'm facing an issue that has me stumped. When making an Ajax call, I'm trying to return a complete HTML structure, specifically a ...

javascriptjqueryhtmlajax

I'm having trouble locating the source of the popstate loop that is generating numerous history entries

I am currently working on a project to create a dynamic webpage where the content of the main div gets replaced when certain navigation links are clicked. I have successfully implemented the pushstate function to update the div content and change the URL a ...

javascriptjqueryhtmlhistorypopstate

How to access an element inside a div using the eq() method

Within my #img_wrapper, I have multiple pictures each enclosed in a link: <div id="img_wrapper"> <a href="img1.jpg" style="display: none;"> <img src="img1.jpg" /> </a> <a href="img2.jpg" style="display: none;"> &l ...

jqueryhtml

What are the steps to creating a gradient for the bottom border?

SAMPLE TEXT: Hi there, I am looking for assistance in designing a bottom border with a gradient and transparent edges. Any suggestions on how I can achieve this effect? ...

htmlcssbordergradient

Canvas featuring labels at the top with a strikethrough effect when utilizing a pie chart in chart.js

I am working on a piece of code that aims to showcase a summary of the most popular forms based on the number of inserted rows in their respective database tables. The goal is to visually represent this data using a pie chart generated with chart.js 2.8. & ...

javascriptphpbootstrap-4chart.js

Personalized hover effect using CSS on Caldera Forms

Struggling to customize the CSS style of my Caldera forms on a WordPress site. My goal is to add a hover effect to the radio checklist fields. Currently, I've only managed to style the bullets and need help adding a hover effect to the fields themselv ...

csswordpress

When it comes to designing responsive websites, the use of `@

Being new to CSS, I am open to criticism and feedback. @media (max-width: 735px) {... } @media (min-width: 735px) {... } @media (width: 320px) {... } @media (width: 360px) {... } @media (width: 375px) {... } @media (width: 414px) {... } I have tried us ...

cssmedia-queries

PHP A more organized method for passing button values when the value is specifically 0

Hey there, I've come across a situation where I had to make some tweaks to my code to get it working. I'm curious if there is a cleaner solution out there that I might be missing, or if my workaround is actually the best approach for solving this ...

phphtmlbutton