Tips for adjusting container wrapping to accommodate smaller window widths in bootstrap 4

Bootstrap 4 is still new to me, and I haven't had much experience working with Bootstrap 3 either.

One issue I've encountered is that when I apply the class col-(breakpoint)-(span) to div elements, they don't automatically align in a single row or adjust based on the window width. Instead, they stack on top of each other and remain left-aligned. To solve this, I added the CSS flex property to the parent container, which worked perfectly.

However, I'm now facing a new challenge. Even though I have assigned classes according to the Bootstrap 4 grid system to make the containers wrap according to the window size, they are not wrapping to the next row as I expected. Instead, the combined width of the flex-items exceeds the window width, causing horizontal scrolling.

What I really need is for the first two containers to stay in one row, and for the last two containers to wrap to another row on smaller screens, such as phone portrait mode (<576px).

 <div style="display:flex;">
    <div class="col-sm-3 col-6"></div>
    <div class="col-sm-3 col-6"></div>
    <div class="col-sm-3 col-6"></div>
    <div class="col-sm-3 col-6"></div>
 </div>

Can anyone help me figure out where I'm going wrong?

Answer №1

Ensure that you are using all the necessary grid classes, as outlined in the documentation here

Remember to enclose all columns within a row, and rows within a container (.container or .container-fluid)

<div class="container">
  <div class="row">
    <div class="col-sm-3 col-6">x</div>
    <div class="col-sm-3 col-6">y</div>
    <div class="col-sm-3 col-6">z</div>
    <div class="col-sm-3 col-6">a</div>
  </div>
</div>

Answer №2

Consider using this method to eliminate the style attribute containing 'flex' and replace it with a 'row' class. Additionally, update the child divs by substituting their current classes with 'col-lg-3 col-md-3 col-6'.

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

The alignment of the content within a div is mismatched compared to a div that doesn't have any

Can you figure out why the element with content is out of order compared to the other elements without content in the code below? This issue seems to disappear when all elements have content. Any insights on this peculiar behavior? (Thank you in advance fo ...

Including Previous & Next Buttons in Product Categories

I have set up the display of category products on the home page using the block below: {{block type="catalog/product_list" template="catalog/product/home_short.phtml" category_id="5" column_count="6"}}. I now want to include previous and next buttons to ...

Duplicate the form field and add a button beneath the newly generated elements

Clicking the "Add New" button below will add new fields to the form. While everything is functioning properly, I would like the newly created fields to appear above the button instead of below it. How can this be achieved? (function($) { "use strict" ...

Extracting a value from a datetimepicker in Angular 6

Currently employing a datetimepicker within Angular. Once the datetime is chosen, how can I retrieve that value and display it in the paragraph element below? <dl-date-time-picker minuteStep="15" ></dl-date-time-picker> <p class="text-sec ...

AngularJS - Oops! Looks like we encountered an error: [$injector:modulerr]

I have a client-server application and I am facing an issue with this error message: "Uncaught Error: [$injector:modulerr]". Despite searching for solutions, none of them seem to be fixing the problem. Here is my client-side code: angular.module('m ...

Guide to incorporating a logo into a personalized WordPress theme

In the process of creating a WordPress theme from scratch, I've hit a roadblock while trying to incorporate a logo in the top left corner of the page where the title would normally be displayed. <h1> <a href="<?php echo home_url(); ?> ...

Accordion Tuning - The Pro and Cons

Here is a functional accordion that I've implemented, you can view it here This is the JavaScript code I am using: $(document).ready(function ($) { $('#accordion').find('.accordion-toggle').click(function () { //Expa ...

issue with jQuery not properly selecting options based on text

I have three select elements in my code, each containing 3 or 4 options. An "Apply All" button is placed on the first file row. When a user selects a sheet name on the first file and clicks the Apply All button, it should automatically select the same she ...

Can I get the audio download for ReCaptcha?

I'm seeking guidance on what I might be doing incorrectly Referring to the code provided in: How to interact with the reCAPTCHA audio element using Selenium and Python My goal is to obtain the src file for the audio to download it. To achieve this, ...

The top margin in CSS relative positioning is not being displayed

My client has a specific requirement for the webpage to be positioned in the center of the screen. To achieve this, I have enclosed the entire webpage within a div element called "mainpage". Here is the CSS code: #mainpage { position:relative; wi ...

Having Trouble Styling Radio Buttons with CSS

Hello, I'm facing an issue with hiding the radio button and replacing it with an image. I was successful in doing this for one set of radio buttons, but the second set in another row is not working properly. Additionally, when a radio button from the ...

Issues with displaying form/button glyphicon when using a fixed table header in Bootstrap

I have a situation where I have a table with a fixed header. In one of the columns, there are delete buttons within a form. The table structure is as follows: <div class="panel panel-default table-responsive fixedHeader"> <!-- Table --> &l ...

Troubleshooting Issue with Absolute Positioning and Hover Effect on Material UI Button

I have a div containing a hidden button and an inner div filled with graphs and text. Occasionally, I need to blur the inner div and make the button float on top in the center of the blurred section, similar to the layout seen on subscription prompts found ...

When attempting to use the .split method, an error is thrown stating that addEventListener is not

I'm attempting to create a table that automatically fills in the next input when I select options from MySQL. However, when I run this code, I get an error saying "addEventListener is not a function." I'm not very familiar with JavaScript, so I&a ...

Utilizing Node.js to insert a new image path into MongoDB

I have successfully stored image paths in MongoDB in array format. Now, I need to figure out how to add another image path to the existing array using the document ID. How can I achieve this in MongoDB? Currently, I am uploading images using an HTML file. ...

The PHP code encountered a parsing error due to an unexpected end of file

I encountered an issue: Parse error: syntax error, unexpected end of file in the line This is the code that triggered the error: <html> <?php function login() { // Code for login function } if (lo ...

Django is refusing to display my CSS and JavaScript files - static files

Within my code in settings.py, I define the static URL like so: STATIC_ROOT = os.path.join(BASE_DIR, "static") STATIC_URL = '/static/' The location of my static files and folders is at /home/myLinuxUsername/myApp/static/interactive-preview-depe ...

Using jQuery's append function, you can dynamically generate a dropdown list in PHP code

One of the challenges I'm facing is related to a button that, when clicked by a user, should append a dropdown list to the HTML. I am using PHP to retrieve data from a database and fill the dropdown list with it. However, upon trying out this code, it ...

Unable to resize static and draggable elements simultaneously

Observe this fiddle to see the demonstration: DEMO If you are interested in the resizing of white divs, check out this link: Resizing of White divs The draggable divs are represented by red while the static divs are shown in white and located in droppabl ...

JavaScript code for validating two passwords is malfunctioning

I'm currently working on a registration form for my website and I'm trying to implement a JS script that compares two password inputs (password and repeat password) and displays a message saying "passwords are not the same." Below is the code I h ...