Why is the col-1 in Bootstrap stacking up instead of flowing horizontally as intended?

Check out my HTML/CSS code below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-1">
            <img src="http://www.unixstickers.com/image/cache/data/stickers/jsfiddle/JSfiddle-blue-w-type.sh-600x600.png" style="width:20px;" />
        </div>
        <div class="col-11">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            <span>Ut luctus consectetur dapibus.</span>
            <span>Phasellus vestibulum dui non lacus ultricies egestas.</span>
            <span>Aenean eros lorem, tincidunt eget eros nec, suscipit egestas elit</span>
        </div>
    </div>
</div>

Take a look at my code on jsfiddle: https://jsfiddle.net/na6pd9he/5/

This is the expected behavior:

https://i.sstatic.net/aZr17.png

However, when the screen size is very small, the div moves down:

https://i.sstatic.net/gF5ic.png

Why is this happening, and how can I prevent it?

cssbootstrap-4

Answer №1

The reason for this is the standard 15px padding in a column on both sides. To reduce this padding, you can utilize a Bootstrap 4 class such as p-1 or p-2.

If you want to eliminate the padding entirely, you can use the p-0 class. However, if you still prefer to have some padding, the p-2 class is ideal as it prevents stacking even on small screens (320px) while maintaining the padding benefit.

Check out the working code snippet below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-1 p-2">
            <img src="http://www.unixstickers.com/image/cache/data/stickers/jsfiddle/JSfiddle-blue-w-type.sh-600x600.png" style="width:20px;" />
        </div>
        <div class="col-11">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            <span>Ut luctus consectetur dapibus.</span>
            <span>Phasellus vestibulum dui non lacus ultricies egestas.</span>
            <span>Aenean eros lorem, tincidunt eget eros nec, suscipit egestas elit</span>
        </div>
    </div>
</div>

For more details, visit:

https://getbootstrap.com/docs/4.0/utilities/spacing/

Answer №2

If you eliminate the padding from the two elements, they will maintain their structure. 

.col-1, .col-11{
  padding:0 !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-1">
            <img src="https://maxcdn.icons8.com/app/uploads/2016/09/sweet-home-icon.jpg" style="width:20px;" />
        </div>
        <div class="col-11">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            <span>Ut luctus consectetur dapibus.</span>
            <span>Phasellus vestibulum dui non lacus ultricies egestas.</span>
            <span>Aenean eros lorem, tincidunt eget eros nec, suscipit egestas elit</span>
        </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

CSS Drop-Down Menu Fails to Function Properly in Firefox and Internet Explorer

Can you help me with this issue I'm having with my website design? In Google Chrome, Opera, and Safari, everything looks great. But in Firefox and the latest version of IE, it's a different story. Here is the HTML code: <div id="navbar"> ...

htmlcssinternet-explorerfirefox

Validating HTML forms using Javascript without displaying innerHTML feedback

Hey, I'm just diving into web development and I'm struggling to figure out why my innerHTML content isn't displaying on the page. Can anyone offer some assistance? I'm trying to display error messages if certain fields are left empty, b ...

javascripthtmlcss

What is the best way to ensure these 2 divs are aligned vertically in the provided html (starting at the same vertical level)?

<div class="container"> <div class="row"> <div class="col-lg-12"> <div class="news-title"> <h3 class="title">NEWS & ARTICLES</h3> ...

htmlcsstwitter-bootstrap

Guide to modifying WordPress version 4.5 with HTML pages

https://i.sstatic.net/5zA5S.png I am encountering issues with my Wordpress website. I have installed it on Softcald in cPanel and now I want to edit my Wordpress using HTML. However, I am having trouble finding the editing option. My Wordpress version is ...

htmlcsswordpresscpanel

The child's styling is conflicting with the parent's styling

Issue with Parent and Child Component Margins import "../src/App.css"; import CardComponent from "./components/CardComponent"; function App() { return ( <div className="App"> <div className="card"></div> <CardCompon ...

javascriptcssreactjs

Styling and scripting with CSS and jQuery in an external JavaScript file

Is it possible to add the jquery library from "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" into an external .js file? And how can a .css file be included in a .js file? ...

javascriptjquerycss

What is the best way to add an ellipsis to the conclusion of a paragraph using .dotdotdot?

I'm struggling with implementing the ellipsis function on my website. My goal is to have the ellipsis appear at the end of each paragraph in the news_inner div (morgan, pia, and gold). I found the function on , but I'm having difficulty understan ...

jquerycss

How to Retrieve Element Property Values from the DOM with JavaScript

I am currently attempting to access the property of an element within my webpage. My main objective is to toggle a float property between left and right when a specific onClick event occurs. However, despite my efforts, I am facing challenges in even acces ...

javascriptcsselement

What is the reason behind my resizer bar not changing color to green?

Whenever I resize the bar between the West and Inner Center areas, it turns green. However, the bar between the Inner Center and Inner South areas does not change color. How can I make it turn green when resizing, including adding the orange highlight for ...

javascriptjquerycssjquery-ui

Is it possible to utilize the Wicket:id for generating CSS?

Can the wicket:id attribute of an element or component be used for CSS styling instead of the "class" attribute? For example: .tooltipster-arrow span, .column-shifter { display: block; width: 0; height: 0; position: absolute; } Let&apos ...

javahtmlcsswicketstyling

When is the appropriate time to utilize the style attribute in CSS?

Hey there, I'm in the process of building a website from scratch and I've hit a snag. I understand that using the style tag isn't ideal, but would it be acceptable in this scenario? Is there a more efficient approach? Let's consider t ...

htmlcssstylescoding-style

Ways to align grid components at the center in MUI frameworks?

I am brand new to using MUI and currently experimenting with the grid functionality. <Grid className={classes.grid} container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}> {data.data.map((item, index) => { ...

cssmaterial-ui

Why does the font on my website appear altered compared to the font in the ttf/woff files?

This is an example of the font's appearance. Here's how the font appears in the .ttf file format. And this is the visual representation of the font on my website. #top { margin: 30px 30px 0px 150px; border: ...

cssfont-face

There seems to be a problem with how the navbar is being displayed in ResponsiveSlides.js

I am currently using WordPress, but I have come here seeking help with a jQuery/CSS issue. I am utilizing responsiveSlides.js to create a simple slideshow, however, when viewing it here at gallery link, it appears that something is not quite right. STEPS: ...

javascriptjqueryhtmlcsswordpress

Closing the Bootstrap 5 Navbar on Click Event

I'm not very familiar with Bootstrap and I came across this code online that involves javascript in html, which I don't fully understand. I want to make the hamburger menu close automatically after selecting an item in the navigation bar, especia ...

htmlcssmenunavbarbootstrap-5

a problem with images overflowing in CSS

I am currently working on setting up a personal blog for myself, but I have encountered an issue with the overflow property. On my home page, I have a div that contains text and images for reviews. When users click on the "read more" button, the full parag ...

htmlcss

The unitPngFix plugin ensures that the display of hidden div elements cannot be altered

I have been trying to resolve an issue with PNG files and transparency in IE browsers on my website. I have made progress, but there seems to be a problem specifically with IE6. To display transparent PNG images correctly on my site in IE browsers, I am u ...

javascriptjquerycssinternet-explorerbrowser

Develop a versatile currency symbol mixin that can be used in various small text formats

I am currently working on a website where I need to display prices in multiple locations. To achieve this, I have created a sass mixin that is designed to add the desired currency symbol before the price with a smaller font-size. Below are examples of how ...

csssassalignmentcurrencyscss-mixins

When using jquery, the .css("border-color") method fails to provide a return value

I came up with the jquery javascript below $(document).mousemove(function(event) { var element = event.target; $(element).css("border","black solid 1px"); }); $(document).mouseout(function(event) { var element = event.target; console.log ...

jquerycssborder

The website functions perfectly on a local server, but once it's uploaded, the images fail

My website is functioning properly on my computer, however, after uploading it to the server, I noticed that some of the links are not appearing. Upon inspecting these links through developer tools, it shows an image size of 'Natural 1 X 1' despi ...

htmlcss