Decimal error causing Bootstrap grid column division issue

I've been attempting to divide the Bootstrap grid column into 20 grids using the code below:

<div style="width: 4.999999998%; margin-top: -27.5px; margin-left: 25px;" class="col-md-.6 col-sm-6">
                <div style="height: 32.5px; width:65px;" class="location-block">
                  <div class="city-img">
                    <img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
                    <div class="overlay-bg"></div>
                  </div>
                  <div class="city-dtl text-center">
                    <h6 class="city-dtl-heading"><a href="#">New York</a></h6>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus.</p>
                    <a href="#" class="btn btn-pink hidden-xs">Read More</a>
                  </div>
                </div>
            </div>
            
 <div style="width: 4.999999998%;margin-top: -27.5px; margin-left: 25px;" class="col-md-.6 col-sm-6">
                <div style="height: 32.5px; width:65px;" class="location-block">
                  <div class="city-img">
                    <img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
                    <div class="overlay-bg"></div>
                  </div>
                  <div class="city-dtl text-center">
                    <h6 class="city-dtl-heading"><a href="#">New York</a></h6>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus.</p>
                    <a href="#" class="btn btn-pink hidden-xs">Read More</a>
                  </div>
                </div>
            </div>

Using this setup, I'm only able to divide it into 12 columns. When attempting to add a 13th one, it shifts below the row. Can someone please point out what's wrong in my code? Thanks in advance.

htmlcssbootstrap-4

Answer №1

each column takes 4.999...% plus 25px of the margin-left, making it slightly more than 5%.

Here are a couple of solutions:

  1. width: calc(4.999...% - 25px)

  2. Simply set all columns to width:100% and apply display:flex to the parent div

Using flex ensures that the total width will always be 100%.

<div style="display:flex">
<div  style="width: 100%; margin-top: -27.5px; margin-left: 25px;"  class="col-md-.6 col-sm-6">
                <div style="height: 32.5px; width:65px;" class="location-block">
                  <div class="city-img">
                    <img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
                    <div class="overlay-bg"></div>
                  </div>
                  <div class="city-dtl text-center">
                    <h6 class="city-dtl-heading"><a href="#">New York</a></h6>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus.</p>
                    <a href="#" class="btn btn-pink hidden-xs">Read More</a>
                  </div>
                </div>
            </div>
            
 <div  style="width: 100%;margin-top: -27.5px; margin-left: 25px;"  class="col-md-.6 col-sm-6">
                <div style="height: 32.5px; width:65px;" class="location-block">
                  <div class="city-img">
                    <img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
                    <div class="overlay-bg"></div>
                  </div>
                  <div class="city-dtl text-center">
                    <h6 class="city-dtl-heading"><a href="#">New York</a></h6>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus.</p>
                    <a href="#" class="btn btn-pink hidden-xs">Read More</a>
                  </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

Is there a way to dynamically adjust @keyframes properties through JavaScript?

I am looking to dynamically change the top value of the keyframes based on a JavaScript variable x. While I have experience changing CSS with JavaScript, this particular challenge has me stumped. Code: var x = Math.floor((Math.random() * 1080) + 1); ...

javascripthtmlcss

Exploring the ways to access inner contents of a Div element using ajax

Looking to update the SQL database with a list of variables sent from an HTML page. Some data is being sent correctly, while others are not. The list is placed in a div divided into two parts: "h1" and another "div". The header data is being sent correctly ...

htmlsqlajaxjson

How can progress bars be animated using CSS or JavaScript?

I am currently working on creating a progress bar animation, but I'm unsure whether to use CSS or JS. Can anyone provide insight on how this effect was achieved here? I am hoping to replicate it. Does anyone know if this is the code they used? I&apos ...

javascriptjqueryhtmlcssanimation

Align the headers of columns to the right in the AgGrid widget

Is there a way to align the column headers to the right in AgGrid without having to implement a custom header component? It seems like a lot of work for something that should be simple. You can see an example here: https://stackblitz.com/edit/angular-ag-g ...

javascriptcssangularag-gridag-grid-angular

Rotating Cursor during AJAX loading process

I utilize a WebGrid across many of my pages to showcase various products. Within the code snippet below, you can see how an item is added to the database when a user clicks on it: public bool ToCart(int userId, string partNumber, ...

c#jqueryasp.nethtmlajax

Creating a series of menu image buttons with rollover effects using HTML and CSS

I am facing an issue with my navigation bar. I have 5 horizontally aligned .png buttons that I want to add rollover effects to using CSS, not Java. After trying multiple solutions, I still can't seem to get it right. None of the methods I attempted w ...

htmlcss

Creating animations with an svg mask can be effective, however, it seems to only work properly

I have been experimenting with creating a transition effect using SVG masks and CSS. Initially, everything was working as intended, but after a few repetitions (usually 1 or 2, unpredictably), the transition effect would suddenly stop and become instantane ...

cssanimationsvgsvg-animate

Issue with vertical navigation bar

Currently working on creating a vertical navigation bar without any styling. It's challenging to figure out how to align the items properly side by side. You can check out the basic functionality at . When clicking on 'Android', I want the g ...

htmlcss

What is the functionality of Google Chrome's "New Tab" iframes?

Have you ever wondered about those 8 small iframes displaying your most visited websites? How do they capture snapshots of the websites? How are the websites chosen for display? And most importantly, how do they actually work? Edit: I want to learn how to ...

javascriptphpjqueryhtmlcss

Decoupling the Top Navigation Bar from the Side Navigation Bar

I currently have a top navigation bar with some menus and a side navigation bar with additional menus. I have applied styling to the vertical navigation bar, but it seems to be affecting all the navigation bars, resulting in an output as shown in the image ...

htmlcsstwitter-bootstrap

Not all properties are affected by the CSS stylesheet

Even though my CSS stylesheet successfully changes the background color of the page, I am facing issues with other properties that I have set on my HTML tags. {% block body %} <div id='title'> <h1> VISUALIZER2D ...

htmlcss

Is there a way to showcase an HTML body in the Gmail app on iOS?

I am facing a challenge while trying to incorporate HTML formatting in the body of an email shared through Gmail using UIActivityViewController on iOS. Despite my efforts, the Gmail application fails to render the HTML content properly and only displays pl ...

htmliosobjective-cgmailuiactivityviewcontroller

Ways to calculate the total order amount when the quantity is modified

The order entry form includes columns for product name, price, and quantity: <table id="order-products" class="mobileorder-table"> <colgroup> <col style="width: 80%;"> <col ...

javascripthtmlcssjavascript-objectsonblur

I am currently working on developing an HTML and JavaScript audio player that can play audio at specific scheduled times

Looking to create a custom HTML/JavaScript audio player that adjusts playback based on the time of day. For instance, if it's 1:00 pm, the file will start playing from 0:00 minutes; and if it's 1:01 pm, the file will begin playing from 1:00 minut ...

javascriptjqueryhtml

Issues with CSS functionality

Every now and then, this thing decides to work but most of the time it just doesn't. I have multiple tables in my application and the CSS is functioning properly for all of them. There's literally no difference with this one table, yet the CSS re ...

cssasp.net-mvcasp.net-mvc-2

Escape sequences do not seem to be functioning properly when using innerHTML

I am facing an issue where a string containing HTML escape characters (such as < and >) needs to be rendered inside a div using innerHTML. The intention is for the escaped characters to appear as text rather than as actual HTML, but they still render ...

javascripthtml

What is the best way to design a large grid layout using HTML5?

I am aiming to construct a 6 by x grid where the columns retain uniform size based on the width of the outer container (i.e. body). The height should be consistent within each row and adjust according to the content in each cell. Below is my current progr ...

htmlcss

Unusual CSS hierarchy observed post AJAX content load

Currently, I am facing a puzzling issue where my CSS rules seem to be losing precedence on a page loaded via AJAX. Despite placing my custom CSS file last in the main page, allowing it to take precedence over any bootstrap styles, after loading new content ...

javascriptcssajax

Adding the target='_parent' attribute to the infowindow of a Google Fusion Map by utilizing a click event listener

As someone who is relatively new to Google Fusion, I am eager to expand my knowledge and skills. Recently, I created a customized map with an infowindow and embedded it onto my website using the FusionTablesLayer Wizard. I wanted to avoid using the target= ...

htmlgoogle-mapsgoogle-maps-api-3google-fusion-tables

using javascript to animate multiple div elements

In my current project, I am harnessing the power of Javascript to incorporate some eye-catching animation effects on a rectangle. Once the animation is complete, I have set the box to disappear from view. Check out the code snippet below for more details: ...

javascriptjqueryhtml