Adding another column in Bootstrap causes it to shift downwards

![image description][1]

I have noticed that when I add column number 1, column number 2 moves down. But when I delete column number 1, column number 2 moves up as expected, similar to column number 3. I'm unsure why this is happening?

<div class="row">
  <div class="col-xs-2" style="height:800px;border: 1px solid red;"><span class="left"></span></div>
  <div  class="col-xs-8 row">
    <div class="col-xs-12" style="height:595px;border: 1px solid black;"> <span class="center"></span></div>
    <div class="col-xs-12" style="height:205px;border: 1px solid blue;"> <span class="center"></span></div>
  </div>
  <div class="col-xs-2" style="height:800px;border: 1px solid red;"><span class="right"></span></div>

</div>
htmlcssbootstrap-4

Answer №1

One potential reason could be that you are placing col1 within the same div as col2. To ensure proper organization, your structure should look like this:

<div><!-- left section -->
col-3
</div>
<div><!-- center section -->
col-1
</div>
<div><!-- right section -->
col-2
</div>

Answer №2

If you're looking to avoid your columns stacking in grid tiers, try using a mix of different classes for each tier as required. Check out the example below to get a clearer understanding of how it functions.

discover more at https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Answer №3

I transform your HTML code

Into

<div class="row">
  <div class="col-xs-2" style="height:800px;border: 1px solid red;"><span class="left"></span></div>
  <div  class="col-xs-8 row">
    <div class="col-xs-12" style="height:595px;border: 1px solid black;"> <span class="center"></span></div>
    <div class="col-xs-12" style="height:205px;border: 1px solid blue;"> <span class="center"></span></div>
  </div>
  <div class="col-xs-2" style="height:800px;border: 1px solid red;"><span class="right"></span></div>

</div>

Find the updated version in this jsfiddle link.

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 are some ways to create a responsive image design?

Currently, I am using the code below to enlarge an image when clicked on. I have attempted using media queries in CSS... I have also added another class in #modalPopupHtml# to adjust the size of the large image: .imgsize{ height: 600px; width: 800px; ...

javascriptjquerycssresponsive-designresponsive

Identifying the object property of a popup window in Selenium Webdriver: simple hacks!

Whenever I attempt to click a link in my application, a popup window opens. In this window, I need to execute a certain action such as a click, however, I am struggling to identify any properties of the objects within. My application is optimized for Inte ...

htmlseleniumdompopup

Discovering the offset location using touchmove

Struggling with a code for dragging/moving an element via touchscreen. The code is functional, but encounters a common issue - unable to drag from the touchpoint itself. Every movement initiates from the edge of the element, no matter where the touch begin ...

javascriptcssoffsettouchmove

Utilizing JavaScript to target a specific div element and modify the href attribute

I am currently working on adjusting the links within my page using JavaScript. While I am able to select the div and the a element, I am encountering difficulties in changing the href attribute. Shopify utilizes a for loop to generate these objects, and i ...

javascriptjqueryhtml

Exploring ways to retrieve checkbox values instead of boolean values upon submission in Angular

I am currently working with a template-driven form and facing an issue. Despite receiving true or false values, I actually need to retrieve the value of checkboxes. <form #f = "ngForm" (ngSubmit) = "onClickSubmit(f.value)"> ...

htmlangulartypescript

Establish the initial date for the calendar in ngb-datepicker

I am currently developing a calendar feature for an application using Angular 7. To display the calendar, I am implementing the ngb-datepicker component from angular ng-bootstrap library. My specific requirement is to be able to set a start date for the c ...

angularbootstrap-4angular-ui-bootstrapbootstrap-datepicker

apply styling to the placeholder with CSS

I have been attempting to customize the styling of the placeholder text. After setting the color to red within the input class, I did not see any changes. Even after conducting research and referring to this link Styling the placeholder in a TextField, I w ...

javascripthtmlreactjsmaterial-ui

issue with displaying content in bootstrap tabs

Every time I attempt to load a tab, it redirects me to the homepage. Just for reference, I am using AngularJS as my JavaScript framework. <div class="container"> <h1> Tab Panel </h1> </div> <div id="exTab1" class="container"&g ...

jqueryhtmlangularjstwitter-bootstraptabs

Mix-up of inheritance and specificity within CSS

Trying to comprehend the discrepancy between two CSS rules, I am currently reviewing this HTML file. <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>specificity</title> <!--[if lt IE 9]> <s ...

htmlcssinheritance

How can one determine the number of characters that remain visible once text-overflow:ellipsis and overflow:hidden are implemented?

How can I display a list of email addresses separated by a delimiter ';' while preserving the original format? I also need to cut off any overflow text that exceeds one line, and then indicate the number of email addresses remaining that the user ...

javascripthtmljquerycss

The values coming from my cascading combo boxes are incorrect

My form contains drop down boxes with options that dynamically change the values of the next drop down box based on the selection. When I choose the first training option, the dates are successfully sent through the form to my email address. However, i ...

javascripthtmlcss

Achieving consistent vertical alignment of text in different web browsers

I have thoroughly reviewed the existing links on this topic, but none of them have been useful in my specific case. Most solutions suggest a way to vertically move text so that it appears aligned. However, the issue I am facing is that the text is already ...

cssfirefoxgoogle-chromecross-browservertical-alignment

Is there a way to identify the presence of a mouse on a website?

In the process of developing a website, I encountered a dilemma with navigation buttons. They needed to be large for aesthetic reasons and ease of use but had to be small when not in use. To address this, I decided to shrink the buttons into thumbnails on ...

javascriptjqueryhtmlweb-applications

In PHP, the use of ul, li, class, and

I have searched high and low, but unfortunately the answers provided by others did not alleviate my problem. Instead, they caused even more confusion. I am currently working on a small project for my website and attempting to convert it to PHP in order to ...

phphtmlcsshtml-lists

What is the best way to showcase JSON response information in an HTML table format?

As a newcomer to JSON, I am facing challenges in showcasing data on a webpage using getJSON for a university project. My attempt to append table rows in a loop has not yielded desired results as I struggle with utilizing the data retrieved from the JSON fi ...

jqueryhtmljson

Steer clear of downloading images while on your smartphone

As I develop a responsive website, I encounter the challenge of optimizing image loading based on viewport size. While using CSS to hide images not needed for certain viewports can reduce display clutter, it does not prevent those images from being downloa ...

javascripthtmlcssresponsive-designcross-browser

Tips for storing checkbox preferences in a user account on an HTML/PHP website

Hello! I am currently working on a website. I have included a checkbox that updates the option selected in phpMyAdmin. The issue I am facing is that when I press submit and then refresh the page using F5, the preference I chose disappears on the client s ...

phphtmlcheckboxphpmyadmin

Positioning an image beneath the navigation bar in Bootstrap and CSS without it getting covered by text

I am having difficulty positioning an image below the navbar without it overlapping with the text in the navbar. No matter what I try in my code, the image remains attached to the bottom of the navbar and won't move to a separate row below it. I hav ...

htmlcssimagebootstrap-4

What could be the reason for the inconsistent behavior of onClick, causing it to occasionally fail to display the associated

I just started using typescript 2 days ago, mainly to create a custom component for my streamlit app. I've made a navigation bar with a tab that can be clicked on the sidebar, but it's displaying some erratic behavior. Sometimes when I click on t ...

pythonhtmltypescriptonclicktabs

Tips for adjusting the HTML font size in Bootstrap 4 while maintaining a responsive navbar

Attempting to scale a webpage the Bootstrap 4 way by using html font-size and rem everywhere else seems to be causing issues with the responsive navbar activation. The problem arises when the view is scaled down; the responsive navbar fails to hide the men ...

htmlcssfrontendbootstrap-4