What is the best way to achieve a horizontally compact layout in Bootstrap by centering the content?

I am looking to center my content on the page and maintain a close proximity between items within a div. However, with Bootstrap 5, when I resize the page wider, additional space is added which pushes the items apart. Is there a way to keep them compacted towards the center of the page?

How can I ensure that Bootstrap 5 maintains the compact layout at the center of the page like in the top image below:

This: https://i.sstatic.net/Rrx6y.jpg

Instead of this: https://i.sstatic.net/YKZJc.jpg

<div class="container text-center center-container">
    <div class="row">
        <div class="col">
            <div>
                image
            </div>
        </div>
        <div class="col">
            Some texty bits
        </div>
        <div class="col">
            <div>
                image
            </div>
        </div>
    </div>
</div>
javascripthtmlcssbootstrap-5

Answer №1

To implement variable width columns, you can utilize the flex utility classes in Bootstrap's flexbox.

Another approach is to use the col-{breakpoint}-auto class within the grid system.

Check out the solution and demos:

https://codesandbox.io/s/bootstrap-flex-example-k7iyn3

Implementation with flex:

<link 
  href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1a1c0f1e2e5b405e405c">[email protected]</a>/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>
<div class="d-flex justify-content-center">
  <div class="d-flex justify-content-center gap-4">
    <div>
      <img src='https://via.placeholder.com/150'>
    </div>
    <div class="p-4 bg-info">
      Some texty bits
    </div>
    <div>
      <img src='https://via.placeholder.com/150'>
    </div>
  </div>
</div>

Implementation with grid:

<link 
  href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030e0e15121513001121544f514f53">[email protected]</a>/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>
<div class="container">
  <div class="row gx-0 justify-content-sm-center gap-4">
    <div class="col col-sm-auto">
      <img src="https://via.placeholder.com/150" />
    </div>
    <div class="col-sm-auto p-4 bg-info">
      Some texty bits
    </div>
    <div class="col col-sm-auto">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>
</div>

Answer №2

Learn how to minimize the distance between columns with bootstrap 5 in this practical example.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492b26262d3a3a3d2939097c6779677b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row g-2">
    <div class="col-4">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-4">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-4">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

g- represents the gap between the columns, also known as gutter space. Remember to set the maximum width to prevent the containers from extending too far across different devices, especially on larger screens.

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

Using PHP to send a JSON request via cURL

I am attempting to make a cURL request in PHP. The request I am trying to send is as follows: $ curl -H 'Content-Type: application/json' -d '{"username":"a", "password":"b","msisdn":"447000000001","webhook":"http://example.com/"}' http ...

phphtmljsoncurlheader

What could be causing my function to execute thrice?

I cannot seem to figure out why my tag cloud is causing the required function to run multiple times instead of just once when I click on a tag. This issue persists whether using jQuery or plain JavaScript. What am I missing? The code I have is very simple, ...

javascriptjqueryhtmlcss

Example TypeScript code: Use the following function in Angular 5 to calculate the total by summing up the subtotals. This function multiplies the price by the quantity

I have a table shown in the image. I am looking to create a function that calculates price* quantity = subtotal for each row, and then sum up all the subtotals to get the total amount with Total=Sum(Subtotal). https://i.stack.imgur.com/4JjfL.png This is ...

javascripthtmlangulartypescript

How to display and download a PDF file on a JSP web page

Can anyone help me with a simple trick to solve this question I have? In my project folder, I have 5 PDF files named file1.pdf, file2.pdf, file3.pdf, file4.pdf, and file5.pdf. I want to display these files in 5 rows on my webpage, each row containing VIEW ...

javascripthtmljspprinting

Employing CSS animations to elevate div elements

Currently, I am working on animating a table of divs and trying to achieve an effect where a new div enters and "bumps up" the existing ones. In my current setup, Message i3 is overlapping Message 2 instead of bumping it up. How can I make Messages 1 and 2 ...

javascriptjqueryhtmlcsscss-animations

The use of the display property with inline-block is not functioning correctly on mobile devices

Can anyone help me figure out why my divs are displaying differently on PC versus phone? They line up well on the computer, but on the phone, the last div is on a new line. Here is a snippet of my code and screenshots for reference. Thank you in advance fo ...

htmlcss

Checking for the existence of data in a MySQL table using Node.js resulted in an error message: "TypeError: res.send is

I am currently attempting to verify the existence of data in a mysql table. Upon doing so, I encountered an error indicating TypeError: res.send is not a function. The mysql table contains ample data with three columns, each specified as varchar(45), alon ...

javascriptjquerymysqlajaxnode.js

Can you modify the current HTML code of a Wix website?

I am currently developing a website using Wix and have encountered an issue with the page description. Despite editing it in Wix, the changes are not reflecting on the live site. Upon inspecting the source code in Chrome, I identified the problem lies wi ...

htmlvelo

What is the best way to ensure that `col-sm-4` takes up the full space previously occupied by `col-sm-5` when it is hidden

In tablet mode, I am concealing my col-sm-5 using the class hidden-sm. <div class="row"> <div class="col-sm-4"> </div> <div class="col-sm-5"> </div> <div class="col-sm-3"> </div> </div& ...

csstwitter-bootstraptwitter-bootstrap-3

Obtaining a complete element from an array that includes a distinct value

I'm attempting to retrieve a specific item from an array that matches a given value. Imagine we have an array const items = ["boat.gif", "goat.png", "moat.jpg"]; We also have a variable const imageName = "boat" Since we don't know the file ex ...

javascriptarraysregexstringvariables

CSS Issue: Hovering Over Link Causes Text to Shift in Internet Explorer

Encountering a problem with CSS and IE, specifically in Internet Explorer 9. When hovering over certain links, the text shifts down which does not occur when using Firefox. You can see an example of this issue at: http://www.debtdispatch.com/list_item_err ...

htmlcssinternet-explorerdrupaldrupal-7

Customizing the step function of HTML5 input number with jQuery: A guide

Is there a way to modify the step value in HTML5 number inputs for my web application? I would like it to increment and decrement by 100 instead of 1. I attempted the following approach: $("#mynumberinput").keydown(function(e){ if (e.keyCode == 38) / ...

javascriptjqueryhtmlkeydownkeycode

Seeking assistance with transmitting data to the server and retrieving it for use. I am looking to achieve this goal utilizing JavaScript with Node.js

I've been experiencing challenges with the interactions between front-end and back-end. I am confident that I am sending the data, but unfortunately, I am unable to access it afterwards. Recently, I utilized this code template (sourced from Mozilla&ap ...

javascriptajaxnode.jspost

Most effective method for adding JQuery events to dynamically generated buttons

I am dynamically generating Twitter Bootstrap modals based on user actions (Long Story). Sometimes, the user may see up to 100 modals on their screen. Each modal contains 5 dynamic buttons, each serving a different purpose with unique ids. I am using jQue ...

javascriptjqueryperformancetwitter-bootstrap

The input 'Element' does not match the expected parameter 'ReactElement<any>' in this context

Here is an example of code snippet: import * as React from 'react'; co ...

javascriptreactjstypescript

Looking to personalize the appearance of an iframe using CSS styling?

I am working with an iframe that generates a form, and I would like to customize the CSS of this form. How can I go about editing the CSS? <div class="quiz-container" style="text-align: center;" data-quiz="#######" data-pr ...

javascripthtmljquerycssiframe

In the following command, where is the PORT stored: ~PORT=8080 npm App.js?

section: Let's consider the following code snippet located in the App.js file: console.log(`This is the port ${process.env.PORT}`); Is there a method to retrieve the value of PORT from outside the running process? ...

javascriptnode.jsnpm

Is it possible for my code in ReactJS to utilize refs due to the presence of backing instances?

When working with ReactJS components, I often piece together JSX elements to create my code. For example, take a look at the snippet below. I recently came across this page https://facebook.github.io/react/docs/more-about-refs.html which mentions that "Re ...

javascriptreactjsecmascript-6

Executing an AJAX request to insert data into MySQL

After my extensive online search, I came across a solution that involves using ajax to set information in my database. While browsing through this page, I learned how to retrieve data from the database. My specific query is: can we also use ajax to set in ...

javascriptphpmysqlajax

The submission of the form is not functioning correctly when triggered by JavaScript using a button

My website was designed using a CSS/HTML framework that has been seamlessly integrated into an ASP.NET site. Within a ContentPlaceHolder, I have implemented a basic login form. The unique aspect is that I am utilizing the onclick event of an image to subm ...

javascriptasp.nethtmlcssforms