What causes bootstrap columns to wrap to a new line when in print view mode?

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container-fluid">
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6" style="background-color:yellow;">50%</div>
      <div class="col-sm-6" style="background-color:orange;">50%</div>
    </div>
    
    <div class="row">
      <div class="col-sm-4" style="background-color:yellow;">33.33%</div>
      <div class="col-sm-4" style="background-color:orange;">33.33%</div>
      <div class="col-sm-4" style="background-color:yellow;">33.33%</div>
    </div>
  </div>
</div>

</body>
</html>

When viewed on a larger screen, two and three columns are displayed respectively, but why do all the columns appear on new lines in print view?

cssbootstrap-4

Answer №1

The reason for utilizing Bootstrap's grid system is its utilization of containers, rows, and columns to effectively organize and position content. This system is constructed with a flexbox setup, making it adaptable across various devices.

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

Ensuring equal spacing between elements that are defined as a percentage, utilizing padding and margin properties

I've been searching online for a while now, but I haven't been able to find a solution that fits my needs. What I'm trying to do is space out 4 divs equally, each with a width of 25% minus the margin. The challenge is ensuring that the last ...

cssflexbox

adding content to div is becoming less speedy

Currently, I'm developing a drawing board using only html/css/jquery and the drawing functionality is working smoothly. The approach I've taken involves capturing the mousemove events and placing a dot (div) at each point where the event occurs, ...

javascriptjqueryhtmlcss

Ways to remedy the white line produced by CSS transform when hovered over?

Has anyone discovered a fix for the white line or border that appears when an element is transformed with CSS scale on hover? I've tried various solutions such as: transform: translateZ(0), -webkit-backface-visibility: hidden, transform-style: preser ...

csshoverlinetransformscale

Concealing/Revealing Elements with jquery

For hours, I've been attempting to switch between hiding one element and showing another in my script. Here is the code I am using: <script type="text/javascript"> function () { $('#Instructions').hide(); $('#G ...

javascriptjquerycss

Adjusting the view to focus solely on the visible portion of the webpage

Is there a way to achieve zooming in and out on a website similar to how it works on the site ? I want only the visible area to zoom in or out when users interact with their browser. I searched online for a solution but couldn't find one. Any suggesti ...

javascriptjqueryhtmlcss

Python script unable to locate div popup using Selenium

Recently, I've been working on enhancing my selenium skills, but I'm facing a challenge in finding a solution to this particular issue. While experimenting with the functionality of the page located at: www.omegle.com When using selenium to cli ...

pythonhtmlcssselenium-webdriveriframe

Is it possible to conceal the Google recaptcha badge using CSS and show the legal text in its place instead?

We have successfully hidden the Google reCaptcha badge on our website using CSS: <style> .grecaptcha-badge { visibility: hidden; } </style> As a result, there is now an empty space where the reCaptcha badge used to be display ...

cssrecaptchacaptchainvisible-recaptcha

I want to show error messages using jquery only when the username or password is entered incorrectly. How can this be achieved?

document.getElementById("buttonClick").addEventListener("click", mouseOverClick); function mouseOverClick(){ document.getElementById("buttonClick").style.color = "blue"; } $("#buttonClick").hover(function() { $(this).css('cursor',&apos ...

javascriptjqueryhtmlcss

Can someone help clear up this confusion with CSS?

Why is image 6.png selected, when all the images are direct descendants of the div shape? Thank you for your assistance, it's greatly appreciated. As far as I know, it should select all the divs because they are all direct descendants of the div #shap ...

javascripthtmlcss

Tips for making rounded corners with CSS styling

Can someone help me create a border like the one shown in this image? https://i.stack.imgur.com/b0GIa.png .child::before { content: ""; position: absolute; width: 13px; height: 13px; left: -1px; background: transparent; border-bott ...

htmlcss

jQuery insert custom text into HTML and eliminate malfunctioning elements

Using jQuery, I have created a form where the entered text is appended to certain elements. This functionality works correctly. Additionally, I have included a remove link with each added element. When someone clicks on the remove button, it should remove ...

jqueryhtmlcss

What is the best way to adjust the height and width of a div when it comes into view through scrolling?

How can I automatically and frequently change the size of my div when it is scrolled into view? HTML <div id="contact" class="fadeInBlock"> <div class="map"> <div class="pointer"> <div class="dot"></div& ...

javascriptjqueryhtmlcss

Is there a way to access the badge hidden behind the collapsible menu in bootstrap 4?

After moving from bootstrap 3 to bootstrap 4, my items no longer align properly. I've scoured the entire Internet for a solution, but I've run out of options (and patience.. haha) This is how it currently looks: https://i.sstatic.net/ra22j.png ...

csstypescriptreact-reduxbootstrap-4

Preventing scrolling in one div while focusing on another div

I am currently in the process of creating a website that functions as a single page site. The main feature of the site is a masonry grid of images. When a user clicks on an item, a detailed panel slides in from the left. Once the panel is closed, it slide ...

javascriptjqueryhtmlcss

What is the best way to align an avatar within a cardHeader component in the center?

Recently, I've been working on a frontend project using Material UI. In my design, I have cards that display data, and I wanted to include an avatar in the center of each card. Despite using a card header to insert the avatar, I struggled to align it ...

javascriptcssreactjsmaterial-ui

Challenge with CSS Box Shadow

Hey there, I've been attempting to add a shadow effect to a box inside another box but I'm struggling to achieve the desired outcome. <div class="box effect2"> <div class="box effect2"> Box inside a box <div> &l ...

css

What is the best method for expanding the width of a <rect> element with animateTransform?

How can I make a <rect> in SVG expand its width using animateTransform based on a specified value? Additionally, I want the color of the <rect> to change according to the following conditions: If the <rect> value is between 0 and 29: {f ...

javascriptcssd3.jssvg

What's the best way to show floating point numbers in a concise format while also maintaining the ability to perform calculations within this Vue app?

I'm currently developing a compact calculator application using Vue 3 and implementing some custom CSS. For the most part, everything seems to be functioning correctly, except for when the results are long numbers that extend beyond the display limit ...

javascriptcssvue.jscalculatorvuejs3

Learn how to dynamically update the dropdown text in bootstrap-vue.js

This is the dropdown code I am currently using: <b-dropdown size="sm" text="Update" split class="m-2"> <b-dropdown-item-button>Action</b-dropdown-item-button> <b-dropdown-item-button>Another ...

vue.jsbootstrap-4bootstrap-vue

Arranging text in alignment on a single line with Vuetify

I am attempting to format text in a way that it is aligned with part on the left side of the card and the other part on the right (with space between them). However, when using class="text-right", the text gets moved down. Does anyone have any ideas on h ...

cssvue.jsvuetify.js