The Bootstrap 4.5 grid system

Something strange is happening... I was trying to set up a webshop with 4 products in a single row while using Bootstrap 4.5, but encountered an issue: see image here

The image doesn't fit inside the boxes properly and there's too much space between them. How can I resize the boxes to be wider and reduce the spacing between them? Here is the code snippet:

<section>
      <div class="container products">
          <div class="row justify-content-center">
            <div class="col-md-2 item">
                <img src="/img/product.png" alt="product">
            </div>
            <div class="col-md-2 offset-md-1 item">
                  
            </div>
            <div class="col-md-2 offset-md-1 item">
                  
            </div>
            <div class="col-md-2 offset-md-1 item">
                  
            </div>
          </div>
      </div>
  </section>

Answer №1

Consider removing the offset-md-1 class and applying margin to the item class instead. To increase the width of the blocks, switch from col-md-2 to col-md-3

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 method for retrieving the chosen value from a <select> element?

Can you help me figure out why I am receiving an array of empty strings in my JavaScript code even though I have HTML select elements with values selected? <select id="col_1" name="col_1" class="columnMapping"> <opt ...

Why Won't My PHP Form Submit on a Bootstrap Website?

I'm struggling with validation and need some assistance. I have a Bootstrap form embedded within an HTML page and a PHP script to handle the submission. However, whenever someone clicks on Submit, the page redirects to display my PHP code instead of a ...

Text overlay on image sliders inside div containers

Is there a way to display div elements on top of an image slider, rather than behind it? I've tried using z-index and position: absolute with no success. Here is an example: HTML: <div id="header"> <img src="assets/images/header1.png" / ...

ways to display a chosen option in a dropdown menu

Below is the code snippet I am currently using, which involves JQuery and Bootstrap 4: $('.dropdown-menu li').on('click', function() { var selectedValue = $(this).text(); $('.dropdown-select').text(selectedValue); }); & ...

Despite Firefox blocking the submit event, the jQuery submit event will still execute

Within my form, I have a text field that is designated as type="url". Before the submission process in Firefox, it appears to validate whether the URL input is correct. If an invalid URL is detected, the submission will not proceed. However, even if the fo ...

Tips for eliminating the excess white space surrounding your entire webpage

I am new to CSS and HTML, currently working on creating a webpage for a school project. I am facing an issue with excessive white space around my webpage that I am struggling to remove. This problem becomes more evident when scrolling right on the page, p ...

Show both sets of data in two tables on one page

Currently, I have two tables named users and vm_tables. I am currently displaying data from the users table in the following manner: $sel_query = "SELECT * FROM users WHERE account_id=".$_SESSION['admin_id']; <td align="left"><?php ech ...

Display a series of rows and columns showcasing various icons using CSS styling

I am looking to create a unique layout where a list of elements (ul with text) appears in a row, with each element having an icon or image displayed to its left. For inspiration, you can view an example at this link: list row columns with different icons i ...

What is the best way to display only a specific container from a page within an IFRAME?

Taking the example into consideration: Imagine a scenario where you have a webpage containing numerous DIVs. Now, the goal is to render a single DIV and its child DIVs within an IFrame. Upon rendering the following code, you'll notice a black box ag ...

jquery hover effect not functioning properly

I have a question regarding my jquery mobile application. I am trying to implement a hover effect on items with the class grid-item, where the width and height change simultaneously in an animation. Here is the code snippet I am using: $('.grid-i ...

Customize the appearance of a shadow-root element

Is there a way to modify the styles of a shadow element? Specifically, is it possible to extend or overwrite certain properties within a CSS class? I am currently using a Chrome extension called Beanote, which has not been updated since April 2017. There i ...

Exploring the possibilities with JavaScript options

I am currently working on a project that involves a dropdown list... to complete unfinished sentences. Unfortunately, I am facing an issue with a message stating Uncaught TypeError: Cannot read property 'options' of null Below is a portion of m ...

Table Construction Repeater Separator Blueprint

I've created repeaters in the past, but I haven't had much experience adjusting table layouts with them. Currently, my repeater is successfully populating data in a single column. However, I would like it to display in 4 columns. I was advised th ...

Are there any problems with using a non-.css file extension for stylesheets?

Is it problematic to use non-standard file extensions for stylesheets, such as .php or .less instead of .css? I am curious if this practice may cause issues with older browsers or mobile devices, and whether it impacts the caching of the file. ...

Ensure that the collapsing toggler and the textbox are aligned on the same line

As part of my project, I am developing a bootstrap5 website that features a search form. I am facing an issue where I am unable to align the form text box labeled "search by country" vertically on the same line as the collapsible hamburger toggler. I hav ...

A guide on how to stop the loading animation and transition to a different slide using HTML and CSS

Check out this CSS code snippet @import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans); @import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans); .loading { position: fixed; top: 0; left: 0; width: 100%; height: ...

Issue regarding the carousel functioning on Bootstrap version 4.5.0

I am currently facing an issue with the carousel in the latest version of Bootstrap (4.5). I have set up a multiple item carousel by creating a grid inside it, where each item looks like this: <div class="carousel-item active"> < ...

Is there a way to establish a single table header for all the table data within the tbody?

I am facing a challenge with dynamically generated tables. I have dynamically created table data cells with numbers and only one fixed table header, leading to an agile look of the table: https://i.sstatic.net/ZweUw.png How can I ensure there is only one ...

What could be causing the lack of functionality in the responsive feature?

What could be the reason for the disappearing responsive effect of the navbar not working in this link? <nav> <li>Hello</li> </nav> <style>@media screen and (max-width:400px) { .nav { display: none; } </styl ...

Can you tell me where the directory is located that's generated by utilizing php and mysql?

As I dive into learning PHP and MySQL, I often come across tutorials where they demonstrate code like $sFolder="whatever/" to handle data storage such as images and videos. However, it's frustrating that they never clarify where this folder is suppose ...