What is the best way to decrease the horizontal gap between col-md-4 divs?

HTML

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="content">1x1</div>
            </div>
            <div class="col-md-4">
                <div class="content">1x2</div>
            </div>
            <div class="col-md-4">
                <div class="content">1x3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="content">2x1</div>
            </div>
            <div class="col-md-4">
                <div class="content">2x2</div>
            </div>
            <div class="col-md-4">
                <div class="content">2x3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="content">3x1</div>
            </div>
            <div class="col-md-4">
                <div class="content">3x2</div>
            </div>
            <div class="col-md-4">
                <div class="content">3x3</div>
            </div>
        </div>
    </div>

CSS

.container {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.content {
    background-color: #1A1919;
    color: white;    
    height: 400px;
    width: 300px;
}

.row{
    padding: 5px;  
}

The spacing between the contents is too much due to excessive horizontal spacing. How can I adjust the spacing between them without affecting the vertical spaces?

htmlcssbootstrap-4

Answer №1

The reason for the wide horizontal space is due to the fixed width of the content class. If you remove that, the content will expand accordingly. You have the option to set the width of the content in percentage or add a margin to the content class.

.container {
  text-align: center;
}

.content {
  background-color: #1A1919;
  color: white;
  height: 400px;
}

.row{
padding:15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-4 col4">
      <div class="content">1x1</div>
    </div>
    <div class="col-md-4 col4">
      <div class="content">1x2</div>
    </div>
    <div class="col-md-4 col4">
      <div class="content">1x3</div>
    </div>
  </div>
  <div class="row ">
    <div class="col-md-4 col4">
      <div class="content">2x1</div>
    </div>
    <div class="col-md-4 col4">
      <div class="content">2x2</div>
    </div>
    <div class="col-md-4 col4">
      <div class="content">2x3</div>
    </div>
  </div>
  <div class="row col4 col4">
    <div class="col-md-4 col4">
      <div class="content">3x1</div>
    </div>
    <div class="col-md-4 col4">
      <div class="content">3x2</div>
    </div>
    <div class="col-md-4">
      <div class="content">3x3</div>
    </div>
  </div>
</div>

CSS Grid can help achieve the desired layout:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 5px;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:80%;
}
.item {
  background-color: gray;
  text-align: center;
  font-size: 30px;
  min-height:100px;
  max-width: 350px;
  
}
<div class="grid-container">
  <div class="item">1x1</div>
  <div class="item">1x2</div>
  <div class="item">1x3</div>  
  <div class="item">2x1</div>
  <div class="item">2x2</div>
  <div class="item">2x3</div>
  <div class="item">3x1</div>
  <div class="item">3x2</div>
  <div class="item">3x3</div> 
</div>

Flexbox is another approach:

.flex-container {
  display: flex;
  /*Generates a flexbox layout with default flex direction as row */
  width: 100%;
  /* Not really required */
  align-items: center;
  /*Aligns contents vertically */
  justify-content: center;
  /*Aligns contents horizontally */
  text-align: center;
  /*Aligns further text in the center */
}

.item {
  background-color: gray;
  text-align: center;
  font-size: 30px;
  min-height: 400px;
  width: 300px;
  margin: 5px;
}
<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
<div class="flex-container">
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div class="flex-container">
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

Answer №2

For a stylish layout, apply float:left; to the content class like this:

.container {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.content {
    float: left;
    background-color: #1A1919;
    color: white;    
    height: 400px;
    width: 300px;
}

.row{
    padding: 5px;  
}
<div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="content">1x1</div>
            </div>
            <div class="col-md-4">
                <div class="content">1x2</div>
            </div>
            <div class="col-md-4">
                <div class="content">1x3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="content">2x1</div>
            </div>
            <div class="col-md-4">
                <div class="content">2x2</div>
            </div>
            <div class="col-md-4">
                <div class="content">2x3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="content">3x1</div>
            </div>
            <div class="col-md-4">
                <div class="content">3x2</div>
            </div>
            <div class="col-md-4">
                <div class="content">3x3</div>
            </div>
        </div>
    </div>

Answer №3

If you want to center the boxes on the page and make sure they are evenly spaced, you can achieve that with the following CSS:

.container {
text-align: center;
display: flex;
flex-direction: column;
}

.content {
background-color: #1A1919;
color: white;    
height: 400px;
width: 300px;
}


.col-md-4 {
margin: 5px -10px 0px -4px;;
}

You can adjust the values in the CSS until you achieve the desired look.

It is recommended to create a separate class for your boxes to avoid affecting any future use of the bootstrap col-md-4 class:

CSS:

.container {
text-align: center;
display: flex;
flex-direction: column;
}

.content {
background-color: #1A1919;
color: white;    
height: 400px;
width: 300px;
}


.box-move {
margin: 5px -10px 0px -4px;;
}

HTML:

<div class="container">
    <div class="row">
        <div class="col-md-4 box-move">
            <div class="content">1x1</div>
        </div>
        <div class="col-md-4 box-move">
            <div class="content">1x2</div>
        </div>
        <div class="col-md-4 box-move">
            <div class="content">1x3</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 box-move">
            <div class="content">2x1</div>
        </div>
        <div class="col-md-4 box-move">
            <div class="content">2x2</div>
        </div>
        <div class="col-md-4 box-move">
            <div class="content">2x3</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 box-move">
            <div class="content">3x1</div>
        </div>
        <div class="col-md-4 box-move">
            <div class="content">3x2</div>
        </div>
        <div class="col-md-4 box-move">
            <div class="content">3x3</div>
        </div>
    </div>
</div>

Answer №4

To make it more responsive and streamlined, you can simplify the code by setting a margin:

.contents {
  background-color: black;
  color: white;
  height: 500px;
  
  margin: 20px 0px;
}
<div class="container-fluid text-center">
        <div class="row">
            <div class="col-md-4">
                <div class="contents">1x1</div>
            </div>
            <div class="col-md-4">
                <div class="contents">1x2</div>
            </div>
            <div class="col-md-4">
                <div class="contents">1x3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="contents">2x1</div>
            </div>
            <div class="col-md-4">
                <div class="contents">2x2</div>
            </div>
            <div class="col-md-4">
                <div class="contents">2x3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="contents">3x1</div>
            </div>
            <div class="col-md-4">
                <div class="contents">3x2</div>
            </div>
            <div class="col-md-4">
                <div class="contents">3x3</div>
            </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

Troubles arise when attempting to load the imported Segoe UI semilight font in CSS

Segoe UI semlight is a font created specifically for Windows 7 that I adore. In fact, I am currently developing a web application and decided to use this font in it. However, I encountered an issue when trying to make the font compatible with other opera ...

htmlcssfonts

The Ajax POST method may not be initialized, but it can still trigger a portion of a PHP if statement

Having trouble with Ajax when trying to send data from page1 to page2. Even though an if statement on page2 indicates that $_POST is not set, some of the code still runs, but not all. This issue is occurring on both XAMPP and my web-server. Here's th ...

phpajaxbootstrap-4

When using Javascript in a JSP page, it may not always read every element within an array

A project I'm currently working on involves developing a web application that prompts users to input estimated costs for various items. To accomplish this task, I am utilizing a JavaScript function to generate the necessary fields dynamically. var fi ...

javascripthtmljsp

Pressing the reset button will initiate once the loader has finished

Hello everyone, I'm currently working on creating a button that transforms into a loader when submitted and then reverts back to a button after the form is successfully submitted. I suspect the issue lies within my JavaScript. I'm not sure how ...

javascripthtmlcss

Hidden input field when inactive

Whenever I start typing in my input form, the text disappears after a moment. The only way to prevent this is by continuously pressing on a letter key on my keyboard. This issue began after I added a resizeInput attribute that adjusts the size of the inpu ...

jqueryhtmlcss

Repeatedly animate elements using jQuery loops

Whenever I click a button, a fish should appear and randomly move over a container at random positions. However, in my current code, the animation only occurs once and does not repeat continuously. I want to create a generic function that can be used for m ...

javascriptjqueryhtmlanimation

What is causing the bootstrap nav-bar to not open on smaller screens?

This nav-bar functions properly on screens larger than 640px, but on smaller screens, the menu button does not display the menu items when clicked. You can view the site here. <nav class="navbar navbar-inverse"> <div class="container-fluid" ...

htmlcssangularjstwitter-bootstraptwitter-bootstrap-3

What could be the reason my HTML5 application is not working offline on my android device?

Hello, I am encountering a problem and I could really use your assistance in figuring out what I am missing. There is a webpage that showcases numerous HTML5 mobile/web applications which can be found at For instance, let's look at this app where yo ...

androidhtmlweb-applications

Transform @Html.PagedListPager from MVC into a structured list using Ul and LI elements

I'm currently using a paging code in my view. How can I convert this into "ul & li" tags? @Html.PagedListPager(Model, page => Url.Action("DisplayTTs", "TTCreator", new { page = page, SearchTT = ViewBag.searchTxt })) ...

cssasp.net-mvcbootstrap-4

Is it possible to have Mobile WebKit store the click position?

I am in the process of developing a unique framework specifically designed for WebKit devices. One of the features I have implemented is a series of list views that activate a 'hover' class when users touch them. Below is the jQuery/JavaScript co ...

javascriptjqueryiphonecssmobile-webkit

Display detailed images upon hovering

Top of the morning to everyone. I'm in search of a way to display higher resolution images when hovering over lower resolution ones. I want to create a rule or function that can handle this dynamically without manually adding hover effects and changi ...

javascriptjqueryhtmlcssimage

Issue with navigation bar small box alignment on the left side

Hey there! I'm relatively new to bootstrap and html, and I've encountered an issue with my navbar setup. When I create my navbar, a small box appears on the left side of my screen. Here's an example <head> <meta charset="ut ...

htmlcssbootstrap-4

Trouble with white space on Hero Image? Tackling coding for the first time!

Currently a creative designer diving into the world of coding, I am eager to enhance my knowledge of HTML and CSS. Recently, I incorporated a hero image into my design but noticed some white gaps appearing on the sides. Strangely enough, it doesn't s ...

htmlcss

Trouble accessing data with AJAX

I am trying to retrieve content from a web page and display it on my own webpage using AJAX. However, I keep encountering an "Access denied" error before the specified page is fetched. It's important to note that the target page does not require any l ...

javascripthtmlajax

Content remains connected to the left side of the webpage in a single column, adapting to different screen sizes

Can someone help me with this issue: RWD I have been struggling to center these elements in a single column when the screen size is less than 960px. I have tried using margin: 0 auto; but it doesn't seem to be working. Any suggestions? ...

htmlcss

Different Line Thickness in Dropdown Menu

Is there a way to adjust line heights in CSS within a drop down menu? I have attempted to change the font sizes of each element, but the new font size does not seem to take effect once an option is selected. Any suggestions would be greatly appreciated! & ...

javascripthtmlcssselectdrop-down-menu

Attempting to create a slider utilizing jQuery

I'm currently working on creating a slider using jquery. I have downloaded the cycle plugin for the slider and included it in my file. The slider consists of 7 pictures. Below is the code I am using, can someone please help me identify any issues? &l ...

javascriptjqueryhtmlcss

Implementing pagination for a scrolling tab group with a flexible number of buttons

I need to implement a pagination feature in my scroll function where users can select from a list of tabs/buttons and it will automatically scroll to the corresponding div/tab. Currently, I have a while statement that generates songs from my database, with ...

phpjquerycss

Obtain HTML content from a loaded JScript frame

I'm in the process of designing a JScript frame and I'm looking to retrieve the HTML content that has been loaded into it. Does anyone have any suggestions on the best way to accomplish this? ...

htmlurlloadjscript

Arranging a pair of tables next to each other with consistent spacing

Hello, I am a beginner on Stack Overflow and currently in the process of learning programming. My goal is to display two tables side by side with an equal amount of spacing between them while ensuring that they do not touch the edges of the page. Below i ...

htmlhtml-table