What could be causing Bootstrap to shift the final column to a new row?

Without any CSS applied to the table and no modifications made to the row class, consider the code snippet below:

<div class="row">
    <div class="itemGrid">
        <div class="col-xs-1"></div>
        <div class="col">
            <table>
                ... 4 TD columns, 4 tr rows, without fixed width content
            </table>
        </div>
        <div class="col-xs-1"></div>
    </div>
</div>

The style defined for .itemGrid is as follows:

.itemGrid{
    text-align: center;
}

Despite the viewport width, the third column (

<div class="col-xs-1"></div>
) appears to be moving to the next row. This behavior seems to suggest an overflow of columns, but why does this occur?

Answer №1

The reason for the issue is that the second column .col is not defined. You can resolve this by implementing the following code snippet:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="itemGrid">
    <div class="col-xs-1">test</div>
    <div class="col-xs-10">
      <table>
        ... 4 TD columns, 4 tr rows, no content of fixed widths
      </table>
    </div>
    <div class="col-xs-1">test</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

The lines intersecting with the ethereal image in the background

I'm trying to achieve button links with an image overlay, but so far I've only been able to do it using CSS: section a:link, section a:visited { width: 150px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: ...

Top method for showcasing animated images (HTML/CSS/JS)

For my website, I want to create an engaging animation showing a coin being flipped multiple times in the air before landing on a specific side. After the animation finishes, I would like it to transform into a static image of the final result. I've ...

Submitting data through a PHP server-side script

I am facing a dilemma regarding why the form is not submitting and directing me to the index.php page. Being new to PHP, I am attempting to utilize the User object. Below is my current progress: <main> <header> <h1>Cr ...

Changing the order of Bootstrap columns

Below is the code snippet I am using in Bootstrap- .message-preview { background-color: green; height:100px; } .inbox-preview { background-color: blue; height:100px; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap. ...

Checking the validity of user input statements

When 2 conditions are met, both error links and messages will display on top of each other. If an input is 0, the validation statement for empty inputs will also trigger. Additionally, if one input is not numeric but the other is, PHP will calculate the va ...

How can you hide a column in Bootstrap 5 if it has no content?

Is there a way to collapse my two column div vertically so that if the second column is empty, the third column can expand to occupy the space? <div class="row"> <div class="col">first col</div> <div class=&qu ...

Enabling the option to follow a link once the script has completed execution

Is there a way to make the second link clickable only after a specific function has executed successfully? I have an EJS template with two links inside paragraphs. When the first link ("Run python") is clicked, a script is activated that takes some time to ...

What could be causing the malfunction of my button's event handlers?

Users can fill out a form in which they provide information about a grocery item they want to add to their cart. After completing the form, they can click on the "Add Item" button. Here's the form in my app.component.html: <form (ngSubmit)="a ...

Using loops in Sass mixins causes errors

I have been developing a SASS code to generate CSS output that has the following format. background: -webkit-linear-gradient(top, 50%); background: -moz-linear-gradient(top, 50%); background: linear-gradient(top, 50%); This is the SASS mixin code I cr ...

Creating a logo that scales seamlessly across different web browsers while maintaining responsiveness through

I am working on making this logo align perfectly with all screen resolutions and browsers, while ensuring it stays at the exact center (both vertically and horizontally) of the #container. If the resolution drops below 320px, I want the company name to dis ...

Instead of displaying a preview of the file, the file upload with jQuery will now showcase the file link in a new window

I am currently working on a Jquery file upload project and I have decided not to use any plugins. My goal is to achieve this using Pure Jquery / JavaScript. Instead of previewing the file, I want to display a link (View) once the image or PDF is uploaded. ...

Display React elements on the web page

Seeking assistance from anyone! I've been grappling with a problem and can't seem to figure out a solution. Here's the scenario: My current setup involves a sidebar and a top bar for navigation in React. Check out my app so far in this imag ...

jQuery is unable to retrieve the parent element of a dynamically generated element as it returns as undefined

I have created login and registration forms using ajax calls to send data. The server side of the application is built with Flask, and any errors are returned in JSON format. In the success function of the ajax call, I create an <li> element that dis ...

Error message: The color shade "100" is not in the color palette. The only available shades are primary, accent, and contrast

I am in the process of upgrading from Angular 12 to 13. Encountering this error, and so far I haven't been able to find a solution for it. Could someone please guide me in the right direction? Here is my package.json file: { "name": &quo ...

What is preventing my code from being recognized as a valid XML file?

Encountering an error indicating that this code snippet is not valid within an XSL file. This is the only feedback provided by the document system. While this code is a part of a larger document, I decided to isolate the issue to determine if it lies in ...

Automatic table width expansion with CSS

I'm in the process of creating a new website, and I want the layout to resemble the following: +---+--------------+ |# | | |n | #page | |a | table.basic | |i | | |g | | |a | | |t | ...

I am interested in creating some CSS styles to modify the color of a toggle switch's plus sign icon

Can anyone help me customize my Wordpress theme? I'm trying to change the color of my toggle plus signs to white using CSS, but I can't figure it out. Your assistance would be greatly appreciated. Here is the URL: This is the CSS code I attempt ...

What are the style attributes that can be edited in each ant design component?

My goal is to customize an ant design card by adding a border only on the left and right sides of the card. The bordered attribute in the card component seems to either remove the entire border or display it on all sides. I am looking for a way to specif ...

Troubleshooting Django: Missing CSS File Issue

I spent a considerable amount of time trying to resolve the issue with loading all my static files. Eventually, I found a solution that allowed SVGs to load properly, but my CSS files were still not loading. Below are snippets from my settings.py file (sh ...

Is it possible to directly add a child in HTML from nodejs?

I'm in the process of developing a chat application that requires users to select a room from a list of available rooms stored in <datalist> options, which are fetched from a SQL table on the server. Within my login.html file, users are prompte ...