What is the reason for the columns being divided on the xs-viewport in Bootstrap?

Attempting to grasp the concepts of Bootstrap has left me puzzled, as I cannot comprehend why the col-xs-11 is not aligning correctly with the col-xs-1. Despite having a total of 12 columns, the layout seems off.

CSS:

[class^="col-"] {
  height: 20px;
  background-color: #563d7c;
  background-color: rgba(86,61,124,.35) !important;
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.6);
}

.row {
  margin-top: 15px;
  margin-bottom: 15px;
}

HTML:

  <div class="container">
      <div class="row">
        <div class="col-xs-1">1</div>
        <div class="col-xs-11">11</div>
      </div>
      <div class="row">
        <div class="col-xs-2">2</div>
        <div class="col-xs-8">8</div>
        <div class="col-xs-2">2</div>
      </div>
  </div>

Result on xs:

with border-css

without border-css

Could someone please point out what I might be overlooking here? The 2-8-2 layout works flawlessly, but the issue lies with the 1-11 setup.

I am currently using the latest version of Firefox and sticking with Bootstrap version 3, not 4.

Edit 1:

<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
csstwitter-bootstraptwitter-bootstrap-3

Answer №1

It appears that the issue is with your col-xs-1 column, which is unable to shrink further due to its padding and content constraints. This is causing the col-xs-11 column to wrap onto the next line.

The problem lies in the 15px left and right padding of the columns, preventing them from reducing their width below 30px even when empty.

Typically, on smaller screens, you would reorganize the columns to allocate more space for the narrower ones:

<div class="row">
    <div class="col-xs-2 col-s-1">1</div>
    <div class="col-xs-10 col-s-11">11</div>
  </div>

If redistributing the columns is not feasible, you can utilize media queries to adjust the padding for smaller screens:

[class^="col-"] {
  height: 20px;
  background-color: #563d7c;
  background-color: rgba(86,61,124,.35) !important;
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.6);
}

.row {
  margin-top: 15px;
  margin-bottom: 15px;
}

@media (max-width: 400px){
   [class^="col-"] {
        padding-left:5px; 
        padding-right:5px; 
    }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


  <div class="container">
  <div class="row">
    <div class="col-xs-2 col-s-1">1</div>
    <div class="col-xs-10 col-s-11">11</div>
  </div>
      <div class="row">
        <div class="col-xs-1">1</div>
        <div class="col-xs-11">11</div>
      </div>
      <div class="row">
        <div class="col-xs-2">2</div>
        <div class="col-xs-8">8</div>
        <div class="col-xs-2">2</div>
      </div>
  </div>

(Please note that the media query may not display correctly within this snippet, but it functions as intended in a standalone HTML page!)

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

Issue with Bootstrap 3 dropdown not receiving updates

My goal is to dynamically populate a bootstrap 3 dropdown menu from a MySQL database. Everything works perfectly the first time I load the data. However, when I add more rows to the database, they do not automatically show up in the dropdown. Only after ...

javascriptphpjquerymysqltwitter-bootstrap

Improper layout on laptop screens with smaller dimensions

The design looks great on a 24-inch laptop, but on an 11-inch screen, the layout becomes distorted. The right column shifts down... Check out the layout here Below is my code: <div class="row" style="margin-left: 325px;"> <div class="span12 ...

htmlcsstwitter-bootstrap

Responsive design is causing issues with the stacking of rows in Bootstrap

Currently in the process of creating a website using HTML5, CSS3, and Bootstrap technologies. Encountering difficulties while attempting to establish a stacked row-column layout. On desktop view, the design appears as desired, resembling this example: ht ...

htmltwitter-bootstrapcss

Why are the items I have inserted inside my <div> tag not appearing on the screen?

What could be simpler than this: {this.state.dash ? <div className='dashWrapper slide'> HELLO </div> : null} I've tried everything, but nothing seems to show up inside the div. ...

cssreactjs

Having issues with my toggler functionality. I attempted to place the JavaScript CDN both at the top and bottom of the code, but unfortunately, it is still not

I recently attempted to place the JavaScript CDN at the top of my code, but unfortunately, it did not have the desired effect. My intention was to make the navigation bar on my website responsive and I utilized a toggler in the process. While the navbar di ...

javascripthtmlcssbootstrap-5

Utilize jQuery to set a cookie, then apply the bodyclass retrieved from the cookie upon page

I have a button that changes the body class to .blackout For this, I am utilizing js-cookie library to manage cookies. The code snippet associated with my button is shown below: <script> $('#boToggle').on('click', function(e) { ...

javascriptjquerycsscookiesdocument-body

Eliminating bottom section in HTML/CSS

I've got this code snippet: new WOW().init(); /* AUTHOR LINK */ $('.about-me-img img, .authorWindowWrapper').hover(function() { $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('tr ...

javascripthtmlcssanimation

col-md-8 displayed on a separate line

Having some trouble with the alignment of col-md-4 and col-md-8 elements on the same line. The col-md-8 is appearing below the col-md-4 despite my attempts to remove the form-control class. <div class="container"> <div class="col-md-4 co ...

twitter-bootstrapbootstrap-4

Rotating Images in Query and Chrome

My script for rotating images is functioning well in various browsers, however, it seems to be experiencing issues specifically with Google Chrome. In order to address this problem, I attempted a CSS3 workaround. Unfortunately, I have encountered difficul ...

jqueryimagecssrotation

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; ...

htmlcssbootstrap-4

Organizing an array of objects within MUI cards based on social media platforms

I'm currently developing an application that showcases athlete data in a grid layout using MUI Grid. The colored borders on the left side of each card are determined by the corresponding social network associated with that athlete. https://i.sstatic. ...

javascriptcssreactjsmaterial-uigrid

Issue with bottom margin on the last flex item located at the end of the container is not being applied

My button is currently touching the end of the container, but I want to create some space between them. However, adding a margin bottom to the button does not seem to be working as expected. Below is the CSS and HTML code: .events{ height: 100%; d ...

htmlcssflexbox

Enhance the dimensions of images on Tumblr

Is there a way to customize the width of a photo in HTML? I am having trouble changing the size of a photo set on Tumblr to be larger. I have tried researching it, but I don't understand where to place maxwidth:600px or if this is even the correct app ...

htmlimagephototumblrcss

Is there an animated Google Contact Form in the works?

Is it possible to replicate the onclick animation featured on the Google login form? The animation involves the placeholder text shrinking and moving to the top left corner as you click the button box, while a border forms around the text. Click here to ...

htmlcssformsanimationtransform

Tips on utilizing CSS selectors with jQuery?

Is there a way to use jQuery to call a function on a web page load that will set the text "Hello world!" on all labels with the CSS class "hello"? I'm curious to learn more about how this works. Can anyone provide some insight? ...

jqueryhtmlcss

Two sidebar panels displayed in the same tab on the Navbar page

In the Shiny navbarpage, is it possible to add 2 sidebar panels with space in between, as illustrated in the diagram linked below? Can we use HTML tags to achieve this spacing? https://i.sstatic.net/jXBXo.png Below is the code for it (Essentially, I requ ...

htmlcssshiny

Tips for styling your Angular Material Card on mobile devices

Currently, I am very happy with my desktop layout which looks like this: https://i.stack.imgur.com/tG0pw.png However, when it comes to the mobile version of my site, here is what I have so far: https://i.stack.imgur.com/KD1hh.jpg While I do like the ho ...

cssangularangular-material

Style the div element with CSS

Is there a way to style a div element within an HTML document using Sencha framework? I have specific CSS properties that I would like to apply to my div. #logo{ position:absolute; top:20%; left:0%; } Below is a snippet of my Sencha code: Ex ...

javascriptcsssencha-touchextjs

What is the best way to switch back and forth between two div elements?

I've been attempting to switch between displaying div .cam1 and div .cam2, however, I can't seem to get it to work. Here's the code snippet in question: HTML: <div class="cam1"></div> <div class="cam2"></div> CS ...

javascriptjqueryhtmlcss

Triggering animation with jQuery and CSS

I am working on a one-page site and I want to make a parallelogram disappear when a button is clicked for the next part. Currently, it is disappearing from right to left but I would like to change the direction to left to right. Additionally, I have a simi ...

javascriptjqueryhtmlcss