Unexpected behavior in grid column layout in Bootstrap 4 has caused some confusion

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="row">
 <div class="col-sm-2">
  <span class="badge badge-info badge-pill">2</span>
 </div>
 <div class="col-sm-10">
  <p>short text to write.</p>
 </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

It appears that the code is not displaying correctly as intended, as the second column seems to be placed below the first column rather than side by side in a 2:10 ratio. Interestingly, when the second column is filled with content that reaches its full width capacity, the layout displays correctly.

csshtmlbootstrap-4

Answer №1

It's important to use a container (.container / .container-fluid) to properly structure your rows and columns.

<div class="container">
    <div class="row">
        <div class="col-sm-2">
            <span class="badge badge-info badge-pill">2</span>
        </div>
        <div class="col-sm-10">
            <p>Insert short text here.</p>
        </div>
    </div>
</div>

fiddle: http://jsfiddle.net/aq9Laaew/184407/

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 is the best way to add animation to the hide/show function?

<div class="overlay"></div> CSS: .overlay::after { position: fixed; top: 0; left: 0; width: 100%; content: ""; z-index: -1; height: 100%; transit ...

htmlcss

What is the best way to add content to a box once it has been hovered over?

Looking to create a sticky note-style design, but struggling with displaying the content inside the box only when hovered. In my code example below, can you help me achieve this effect? body { margin: 45px; } .box { display:inline-block; backgrou ...

javascriptjqueryhtmlcss

Css beforehand, unique subject matter

Trying to use a jQuery plugin that has CSS code like this: .icon-eye:before { content: '\56'; } On the plugin's site, it displays as an eye icon. However, when I install the plugin on my local PC, I see 'V' instead of the ey ...

jqueryhtmlcss

Fuzzy background when you scroll

My container has an image that blurs when you scroll down the page by 50 pixels. I feel like I've seen this effect somewhere before, but I can't quite recall where. I want the text to remain unaffected and not turn blue. Here is the HTML: <d ...

javascriptjqueryhtmlcss

Dealing with rowspan and colspan issues in Internet Explorer

Currently, I am facing the challenge of creating a table with a complex system of colspans and rowspans. If you want to take a look at it, you can view it here This is the HTML code for the table: <table cellspacing="0" cellpadding="0" style="table-la ...

cssinternet-explorerhtml-tableinternet-explorer-11

Achieving the display of font-weight 100 for Google web fonts successful

I have been experiencing difficulties in achieving the ultra-thin display of the Lato font through Google web fonts. Despite appearing correctly on Google's website, the font weight does not change when implemented on my own page if it is below 400 (I ...

csswebfontsgoogle-webfonts

Steps for ensuring a div component appears on top of any other component (like h1 or p)

The outcome of the code below is displayed in this image: https://i.stack.imgur.com/CPDqC.png Is it possible to make the dropdown overlap on top of the 'HELLO's text, hiding the h1 and p tags? I have tried using z-index without success. Making ...

javascripthtmlcssreactjs

The ng-show and ng-hide directives are not working as expected, and there are no error

I'm currently working on a Todo App using AngularJS 1.x (version 1.6), but I'm having issues with ng-show and ng-hide functionality. The aim is to have a text box appear in the todo section when the edit button is clicked to modify existing todos ...

javascriptangularjshtml

What are some effective ways to utilize CSS translateZ?

I'm attempting to create a new layer of content with CSS, but I'm having trouble adjusting the depth of the element using the translateZ property. I tried using some codepen code to achieve a 3D effect. Below is the HTML, CSS, and Javascript cod ...

htmlcss

Search field in DataTables appears to be misaligned

I'm in the process of developing a small website using JSP and DataTables (currently only for the first table). Here's what I have so far: As you can observe, there seems to be an alignment issue with the search field position. I'm n ...

javascriptjqueryhtmlcssdatatables

Retrieve an element within an embedded page using jQuery's <object> element

I need help with integrating an external webpage into my site using an < object > tag <!DOCTYPE html> <html> <head> <title>Page title</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min ...

jqueryhtml

Loading Web Applications Screen

My web app contains multiple tree views. Upon loading the page, I first see the unordered lists before the styling of the trees is displayed in the DOM after a brief delay. Is there a method to mask the web app with a spinner placed in the center of the s ...

javascriptjqueryhtmlcssweb-applications

navigation trail click feature

I'm currently working on an Angular application using Chart.js to display dynamic pie charts. I want to include a breadcrumb navigation above the pie charts to show users the hierarchy of the data they are viewing. I also need to enable click functio ...

angularbootstrap-4

The outcomes may vary even with identical fonts, character spacing, and line-height

When I first learned about @font-face in CSS3, I was excited about the prospect of using consistent fonts across all browsers. However, after experimenting with it using the code below on jsFiddle, my expectations were challenged: HTML: <div> T ...

htmlcss

What is the process for activating JavaScript and embedding it into an HTML document?

I am currently utilizing a JavaScript API that contains several functions. How can I incorporate it into an HTML file? One of the functions, "api.ping()", performs well on PowerShell, but I am encountering difficulties with displaying it on an HTML file. ...

javascripthtml

Tips for relocating a CSS button

I have designed two buttons using css and I am looking to align them below the title "forecast customer activity". Due to extensive styling in css, the code might appear lengthy. Requesting assistance with a solution after reviewing the following code snip ...

javascripthtmlcss

Ensuring Bootstrap 3 Table Header Widths Remain Fixed

How can I ensure the header columns in my Bootstrap 3 table maintain a fixed width, regardless of the content in the regular rows? I want to avoid the messy look of content splitting onto multiple lines. Here's an example: I'd prefer not to adju ...

htmlcsstwitter-bootstrapstyling

After incorporating an additional element, the li:nth-child(odd) selector is no longer functioning correctly

I previously had a setup where items in a list would have alternate colors using jQuery: $('ul.follows li:nth-child(odd)').addClass('alternate'); Everything was functioning properly until I introduced an a tag before the list items. N ...

jquerycss

JavaScripts files are not importing correctly

My JavaScript scripts and Bootstrap file are failing to load. When I check with inspect element, the error message I receive is as follows: https://i.sstatic.net/lqAz3.png Files included in the header are: <head> <!-- Required meta tags alw ...

javascripthtmlbootstrap-4

Is there a advantage to using Angular's component style encapsulation for improved performance?

Recently, I came across the styling methods of Angular 2 which allows you to directly include your styles within the component. If you want to explore more on this topic, check out loading styles. There are two options for style encapsulation in Angular 2 ...

cssangularsassencapsulation