Adjustable Column Spacing in Bootstrap

My layout consists of a row with three columns that adjust sizes based on the screen size. However, I encounter an issue when shrinking the screen, as I only want the margin to change for specific boxes. The following illustrates the appearance with no margin on the left or right.

Screen Size: XL

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

Upon scaling down the screen size with no margin, the layout looks like this.

Screen Size: L https://i.sstatic.net/Daj8i.png

When adjusting the margin to "mr-4," the scaling of the boxes does not match. The layout appears with margin on the first and second boxes as shown below.

Screen Size: XL https://i.sstatic.net/4TlXD.png Screen Size: L https://i.sstatic.net/nMwLh.png

Below is the HTML code I am currently working with:

.cram-set-header{
  color: #042157;
  margin-bottom: 9px;
}

.cram-set{
  background-color: #ffffff;
  height: 120px;
  padding-top: 32px;
  border-radius: 5px;
  box-shadow: 0px 3px 6px #CBCBCB;
  padding-left: 28px;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body>
<div id="subject-container" class="container-fluid">
  <div class="row">
    <div class="col-2">

    </div>

    <div class="col-8">
      <div class="row">
        <div class="row pt-1">
          <h3 id="subject-text">My Sets</h3>
          <span class="num-cram-sets pt-1 ml-2">- 8 Cram Sets</span>

        </div>
        <div class="row ml-auto">
          <div class="col-8 pr-0 pb-3">
            <button class="btn" id="sign-up-button" data-toggle="modal" data-target="#uploadModal">Upload</button>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 cram-set mb-3 mr-4">
          <h5 class="cram-set-header mb-0">Marketing - Cram Set #1</h5>
          <div class="row pl-3">
            <p class="mr-1">5.0</p>
            <img src="img/star-rating.png" alt="" height="16px">
            <p class="ml-2">1,034 Questions</p>
          </div>
        </div>

        <div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 cram-set mb-3">
          <h5 class...

I am looking to maintain the margin between boxes when the screen size is minimized. One approach I am considering is creating a class and utilizing media queries to adjust the margin based on screen size, ensuring each box has margin at some point.

For instance, on an XL screen, I do not want the right margin on the box to the far right to allow it to align with the column edge.

https://repl.it/join/tgbodxoh-claytonhorning

htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

To fix that issue, my recommendation is to implement the flex-wrap: wrap property. I have introduced some new classes to your HTML code to address the problem effectively. I trust this solution will meet your requirements.

.row-container {
  display:flex;
  flex:0 0 100%;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
}
.cram-set-header{
  color: #042157;
  margin-bottom: 9px;
}

.cram-set{
  flex-basis:25%;
  background-color: #ffffff;
  height: 120px;
  padding-top: 32px;
  border-radius: 5px;
  box-shadow: 0px 3px 6px #CBCBCB;
  padding-left: 28px;
  margin:10px;
}
.row-header {
  display:flex;
  flex-direction:row;
  flex:0 0 100%;
  
}
.row-header .row.pt-1 {
  flex-basis:50%;
  margin:10px;
}
.row-header .row.ml-auto {
  display:flex;
  justify-content:flex-end;
  flex-basis:50%;
  margin:30px;
}

@media screen and (max-width:991px){
  .row-container {
  flex-wrap:wrap;
}
  
}

<body>
<div id="subject-container" class="container-fluid">
  <div class="row">
    <div class="col-2">

    </div>

    <div class="col-8">
      <div class="row row-header">
        <div class="row pt-1">
          <h3 id="subject-text">My Sets</h3>
          <span class="num-cram-sets pt-1 ml-2">- 8 Cram Sets</span>

        </div>
        <div class="row ml-auto">
          <div class="col-8 pr-0 pb-3">
            <button class="btn" id="sign-up-button" data-toggle="modal" data-target="#uploadModal">Upload</button>
          </div>
        </div>
      </div>

      <div class="row row-container">
        <div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 cram-set mb-3 mr-4">
          <h5 class="cram-set-header mb-0">Marketing - Cram Set #1</h5>
          <div class="row pl-3">
            <p class="mr-1">5.0</p>
            <img src="img/star-rating.png" alt="" height="16px">
            <p class="ml-2">1,034 Questions</p>
          </div>
        </div>

        <div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 cram-set mb-3">
          <h5 class="cram-set-header mb-0">Marketing - Cram Set #1</h5>
          <div class="row pl-3">
            <p class="mr-1">5.0</p>
            <img src="img/star-rating.png" alt="" height="16px">
            <p class="ml-2">1,034 Questions</p>
          </div>
        </div>
        <div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 cram-set mb-3">
          <h5 class="cram-set-header mb-0">Marketing - Cram Set #1</h5>
          <div class="row pl-3">
            <p class="mr-1">5.0</p>
            <img src="img/star-rating.png" alt="" height="16px">
            <p class="ml-2">1,034 Questions</p>
          </div>
        </div>
        <div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 cram-set">
          <h5 class="cram-set-header mb-0">Marketing - Cram Set #1</h5>
          <div class="row pl-3">
            <p class="mr-1">5.0</p>
            <img src="img/star-rating.png" alt="" height="16px">
            <p class="ml-2">1,034 Questions</p>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="col-2">

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

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

The navbar does not dictate the views

Greetings lovely individuals I've been grappling with this issue for a while now and it seems I can't quite crack it on my own... I'm hopeful that you can assist me. My objective: A functioning navigation bar controlled by PHP in an MVC pat ...

phphtmlmodel-view-controllerbootstrap-4

Search a location database using the user's current coordinates

Currently, I am working on a project that involves a database containing locations specified by longitude and latitude. Upon loading the index page, my goal is to fetch the user's location and then identify every point within a certain distance radius ...

javascriptpythonmysqlhtmlgeolocation

Can a linked checkbox be created?

Is it possible to create a switch type button that automatically redirects to a webpage when turned on by clicking a checkbox? I'm working on implementing this feature and would like to know if it's feasible. ...

javascripthtmlcss

jquery executes a function on each element that is discovered using the .find method

I am working with the following HTML code that is parsed by the system. I want to know how to perform an action on each "find" element and execute a specific function for every anchor found. HTML Code <ul> <li class="category"> <h2&g ...

jqueryhtmlfindnestedeach

PHP script not recognizing CSS styles

My coding dilemma involves a script that is supposed to display numbers from 1 to 100 in black font. For multiples of 3, it should show "Three" in green, and for multiples of 7, it should display "Seven" in blue instead of the number. If a number is a mult ...

phpcss

Working on a Rails 7.0 project utilizing Bootstrap in development mode

Recently, I created a brand new Rails app and proceeded to install Bootstrap using cssbundling-rails. However, I encountered an error stating The asset "application.css" is not present in the asset pipeline.. To get the application up and running ...

ruby-on-railstwitter-bootstrapbootstrap-5ruby-on-rails-7

Issue with horizontal navigation in CSS

I'm struggling with styling my CSS navigation bar. The last list item is moving to a second line, which really messes up the look of my website. Can someone take a look at my code and point out what I'm doing wrong? Thank you in advance. HTML: ...

htmlcssnavigation

The jQuery UI dialog stubbornly refuses to close when tapped, yet opens without hesitation

I'm struggling to understand why my dialog boxes are not closing when I tap outside of them. I've tried using different selectors such as document, window, .ikon_picmap, but nothing seems to be working. What am I missing here? Check out the code ...

jquerycssjquery-uipositionjquery-ui-dialog

Navigate through a webpage using anchor links without the hash symbol in the URL

My goal is to smoothly navigate through a page using the anchor tag feature. My current method involves: <a href="#div1">Link1</a> <div id='div1'>link1 points me!!</div> Whenever I click on Link1, the page effectively ...

javascripthtmlhash

Execute a function on each item within a JavaScript array

I'm working with a JavaScript array and trying to figure out how to display each item in the array within an h1 element. Can anyone help me out? This is what I have come up with so far: names = ["Jeff", "Steve", "Bill"]; function show() { let c ...

javascripthtml

The accuracy of IE9 <section> is not quite up to par

When viewing This Page in IE9, the element section#tcs-website-content appears as 990px wide even though its CSS property is set to width: 100%. This occurs despite all parent elements also having a width of 100%, resulting in a browser width of 1024px. A ...

csshtmlinternet-explorer-9width

What is the method for adding a string to the HTML tag within img src?

Hello everyone, I have a requirement to dynamically edit an HTML file at runtime. Essentially, I have an HTML file stored on the server and I need to pass additional tags in a different language. Here is an example of how I am doing it: NSString* content ...

htmlobjective-c

The Slick carousel code downloaded from their official website is malfunctioning

I found this code on slick's website, but it's not working for me. Can anyone spot what I might be missing? http://codepen.io/anon/pen/pyEddO <html> <head> <title>My Awesome New Website</title> <link rel="styles ...

jqueryhtmlcsscarouselslick.js

Challenge of integrating Bootstrap data source with Flask and WTForm

When using the bootstrap autocomplete function, I am passing in a list. The template code loads in this list: <script> var autoc = {{ autoc|tojson|safe}};</script> Using WTForm: {{form.name(**{"data-provide":"typeahead","data-source": autoc ...

pythontwitter-bootstrap

Validating a form using HTML5 in a modal designed with Bootstrap

As a newcomer to jquery and javascript, I am facing a challenge. I want the form to open when the "Open Modal" button in the modal is clicked. After that, upon clicking 'Save' in the modal, I need it to validate the HTML5 form and if validation ...

jqueryhtmlformsvalidationbootstrap-modal

The div containing the background image does not resize properly when using media queries

page in question. I am currently working on a chess board project where each cell is represented by a div element. My goal is to make the board expand beyond certain minimum widths using media queries, but for some reason, this functionality is not working ...

htmlcssangularjsmedia-queries

The custom font fails to load on a customized Material UI theme

In my React web application, I tried to implement a custom font by writing the following code: import React, { FunctionComponent } from 'react' import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles' import SofiaPro ...

javascriptcssreactjsmaterial-uifont-face

Social media platform-inspired grid layout for displaying photos in a stylish and orderly manner

Looking to create a photos grid layout similar to Facebook using angularjs and bootstrap. Came across the angular-masonry plugin which seems like it could work. Here are some sample layouts I'm aiming for: https://i.sstatic.net/6NdNW.png https://i.s ...

cssangularjsfacebooktwitter-bootstrapgrid

What should the AJAX file in TagManager jQuery look like?

I'm currently utilizing Tagsmanager with JQuery, which can be found at There is a feature that allows tags to be pushed via Ajax: jQuery(".tm-input").tagsManager({ AjaxPush: '/ajax/countries/push', AjaxPushAllTags: true, ...

phpjavascriptajaxjquerytwitter-bootstrap

Mastering Sprite Movement in JavaScript: Going Forward with Your Sprite

Currently, I am developing a JavaScript game that utilizes the canvas functionality in HTML 5. I am looking to create projectiles that are capable of moving towards a specific coordinate by using a vector2 (x, y) as the velocity. Is there a mathematical fo ...

javascripthtmlcanvasdrawing