Issues with Bootstrap columns not breaking as expected

I am encountering an issue where my bootstrap columns are displaying as two on one row followed by a single column on the next row in the sm view port. In the xs view port, each column is stacked on top of each other.

Here is the HTML code:

<div class=" row">
    <div class="sandwich-item col-sm-4 col-xs-6">
        <h2>hello</h2>
    </div>
    <div class="sandwich-item col-sm-4 col-xs-6">
        <h2>hello</h2>
    </div>
    <div class="sandwich-item col-sm-4 col-xs-6">
        <h2>hello</h2>
    </div>
</div>

And here is the CSS code:

.sandwich-item{
    border: 2px solid #390000;
    margin-right: 10px;
}
    .sandwich-item h2 {
        font-size: 18px;
        font-weight: bold;
    }

For small view port, click here.

And for extra-small view port, click here

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

.sandwich-item {
  border: 2px solid #390000;
}

.sandwich-item h2 {
  font-size: 18px;
  font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" row">
  <div class="col-sm-4 col-xs-6">
    <div class="sandwich-item">
      <h2>hello</h2>
    </div>
  </div>
  <div class="col-sm-4 col-xs-6">
    <div class="sandwich-item">
      <h2>hello</h2>
    </div>
  </div>
  <div class="col-sm-4 col-xs-6">
    <div class="sandwich-item">
      <h2>hello</h2>
    </div>
  </div>
</div>

Your margin-right: 10px; is causing issues with the column layout.

Answer №2

Important: Omitting the use of margin-right: 10px;

.sandwich-item{
    border: 2px solid #390000;
}

.sandwich-item h2 {
    font-size: 18px;
       font-weight: bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
    <span class="col-sm-4 col-xs-6">
    <div class="sandwich-item">
        <h2>hello</h2>
    </div>
 </span>
     
    <span class="col-sm-4 col-xs-6">
    <div class="sandwich-item">
        <h2>hello</h2>
    </div>
 </span>
    
    <span class="col-sm-4 col-xs-6">
    <div class="sandwich-item">
        <h2>hello</h2>
    </div>
  </span>
</div>

Answer №3

It is recommended to avoid overriding the margin for bootstrap's columns with custom styles, as this can cause issues with width in some browsers. Instead, nest your custom styles inside the columns like this:

.sandwich-item{
    border: 2px solid #390000;
    margin-right: 10px;
}

.sandwich-item h2 {
    font-size: 18px;
    font-weight: bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class=" row">
    <div class="col-sm-4 col-xs-6">
      <div class="sandwich-item">
        <h2>hello</h2>      
      </div>
    </div>
    <div class="col-sm-4 col-xs-6">
      <div class="sandwich-item">
        <h2>hello</h2>
      </div>
    </div>
    <div class="col-sm-4 col-xs-6">
      <div class="sandwich-item">
        <h2>hello</h2>
      </div>
    </div>
</div>

Answer №4

.sandwich-item{
    border: 2px solid #390000; 
}
    .sandwich-item h2 {
        font-size: 18px;
        font-weight: bold;
    }
<div class=" row">
    <div class="sandwich-item col-sm-4 col-xs-6">
        <h2>hello</h2>
    </div>
    <div class="sandwich-item col-sm-4 col-xs-6">
        <h2>hello</h2>
    </div>
    <div class="sandwich-item col-sm-4 col-xs-6">
        <h2>hello</h2>
    </div>
</div>

Answer №5

After thoroughly testing on Chrome and Firefox browsers, I have confirmed that the layout is not breaking. To resolve this issue, simply perform a comprehensive browser refresh. There are no errors in your code, so there is no requirement to remove the margin-right: 10px;

Whether you include this code snippet or not, it will have no impact whatsoever.

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 Navbar creating unnecessary space on the right side

Despite my efforts to address this issue using previous solutions, nothing seems to work for me. The older recommendations don't seem to apply anymore due to changes in Bootstrap. So I'm reaching out again for help, sorry about that. I came acro ...

htmlcsstwitter-bootstrapnavbar

Show the selected row's data from a gridview in a dropdown menu

I am facing an issue with displaying the selected row value in a dropdown list. Can anyone assist me with this problem? Here is an example scenario: https://i.sstatic.net/RYssP.png Upon looking at the image, you will notice that the selected row's ...

c#htmlasp.net

Inaccurate Placement of Navigation Tool Tip

I added some custom tooltip arrows to my navigation menu. They appear when you hover over the menu items, but strangely they also show up at the bottom of the drop-down. I'm curious about which piece of code is causing this behavior! Below is the cod ...

htmlcsswordpressnavigationtooltip

Seeking assistance with sending data from a table row to a modal component in ReactJS

I'm looking to dynamically pass table row data to my modal class in React, but I am still in the process of learning. Currently, my modal class only has static data. I am eager to learn more about React and would appreciate any help on how to pass all ...

twitter-bootstrapreactjsredux

Emphasize the checkbox

In my table, I have radio buttons that should turn the neighboring cell green when clicked. Using JQuery, I added a "highlight" class on $.change event to achieve this effect. However, I encountered an issue where some radio buttons load with the "checked ...

jquerycsshighlight

What is the best way to use JavaScript or jQuery to place divs in the desired position?

Here is the code snippet I am working with and I need assistance in positioning the div elements accordingly: <div id="outer" style="width:300px"> <canvas></canvas> <div id="inner"> <div class="a"> val1 </div> <div c ...

javascriptjqueryhtmlcsscanvas

The ng-change event fails to trigger when the date change event is activated

Hey there, I'm new to working with AngularJS. I have a scenario where I want a method to be triggered when I change the date, opening a modal. However, when I use the ng-change event, the method is not called upon date change. If I switch to using ng- ...

javascripthtmlangularjstypescript

How come the font size doesn't transfer from the div element to the table element?

I am experiencing an issue with my document presentation. The document is simple and includes HTML and CSS code as well as some text content. When I render the document, I notice that the table element does not inherit the font size from its parent div, un ...

htmlcss

What is the best way to automatically show scrollbars when a page loads using JavaScript?

How can I make the vertical scrollbar appear as soon as the page loads using javascript? I am currently using a jquery slide toggle animation that causes the vertical scrollbar to show up because it makes the page longer. However, when the scrollbar appear ...

javascriptjqueryhtml

What is the reason for the prohibition of style tags in a Vue template, while they are permitted in a .vue file?

While browsing through the Vue documentation, I noticed that Vue appears to automatically remove <style> tags from your template. For instance, if you have a component in a .js file like... export default { template: ( `<section> ...

javascriptcssvue.jsvuejs3

Using jQuery to highlight the navigation menu when a specific div scrolls into view

I have implemented a side navigation consisting of circular divs. Clicking on one scrolls you to the corresponding .block div, and everything functions correctly. However, I am now curious if it is feasible to highlight the relevant .nav-item div based on ...

javascriptjqueryhtmlcss

Tips on ensuring Material-UI Datatable adapts to varying window dimensions

I am facing an issue with the responsiveness of my MUIDatatables. The table is not adjusting properly to different window sizes. I specifically want each row in the table to be displayed on a single line and utilize horizontal scrolling. I attempted to pl ...

htmlcssreactjsmaterial-ui

In Firefox, only the <object> and <iframe> tags appear empty

I am trying to embed one website into another by controlling both servers, which I'll call "site1.com" (the browser site) and "site2.com" (the site I want to embed). HTML Embed Code First attempt using iframe tag: <iframe height="600" wi ...

htmlhttpfirefoxnginxiframe

Using HTML Select field to make ajax calls to web services

When working with modals that contain forms to create objects for database storage, there is a Select field included. This is the code snippet for the Select field: <div class="form-group" id=existingUser> <label>Username</label> < ...

javascriptjqueryhtmlajaxmodel-view-controller

Tips for concealing the CSS style of a descendant span element when the parent div employs text-overflow: ellipsis

Is it possible to prevent the green background of a child span from showing when the parent span has text overflow ellipsis applied? .container { border : 1px solid black; max-width : 100px; overflow : hidden; text-overflow ...

htmlcss

Puppeteer's flawed performance leads to the generation of low-quality

Currently, I am utilizing puppeteer to generate a PDF from my static local HTML file. However, the resulting PDF is turning out to be corrupted. When attempting to open the file using Adobe Reader, an error message pops up stating 'Bad file handle&apo ...

javascripthtmlnode.jspdfpuppeteer

Tips for showing a preview of the image chosen in Angular

How can I use Angular to display a preview of the selected image? Currently, when we click, all images are selected. Does anyone have suggestions on how to show the preview of only the selected image and unselect the previously selected one when a new imag ...

cssangulartypescript

Position a square or rounded HTML element in the center both horizontally and vertically, with a fixed size that dynamically

Is there a way to both vertically and horizontally center a square or rounded fixed HTML element while changing its size? I'm finding it challenging because the width and height need to remain equal. ...

htmlcss

``CSS: Styling a Rounded Div with a Clipped Scrollbar

I am attempting to contain a scrollbar within a div so that it remains within the rounded corners without overflowing. Take a look at the code snippet below to see the problem in action. Is there a way for the scrollbar to be fixed in its position, while ...

htmlcss

Is there a way for me to transmit a text file to all active browsers on a website following a user's submission of a PHP form?

Is there a way for PHP to send a text string to all browsers that have a specific cookie when another browser submits a form? ...

javascriptphphtmlajax