Encountering a problem with Bootstrap 4 when trying to set medium breakpoints for columns, causing them to wrap to

I've been searching for a solution to this layout issue, but haven't found one yet. Here is the basic markup:

<div class="container-fluid">
  <div class="row border-bottom">
    <div class="col d-none d-md-block" style="-ms-flex: 0 0 125px;flex: 0 0 125px;">
       [logo image]
    </div>
    <div class="col-md-8 d-md-block align-items-center justify-content-center">
      <h5> [school name]</h5>
      <p class="d-inline"> [city state]</p>

      <div class="row d-none d-sm-flex">
        <div class="col">Website</div>
        <div class="col">Setting</div>
        <div class="col">Size</div>
      </div>
   </div>
   <div class="col-md-2 align-items-center" style="border:1px solid plum">
     <a class="btn btn-sm btn-collegeList align-items-center justify-content-center px-1 px-md-2"> profile</a>
   </div>
 </div>

On medium-sized displays, the third column containing the button wraps under the fixed-width logo column: https://i.sstatic.net/NwGNd.png

I want it to stay to the right like in large displays, or at least be centered under the content as in small displays. https://i.sstatic.net/UgSiO.png

and the small

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

csstwitter-bootstrapbootstrap-4

Answer №1

To ensure consistency in your layout across smaller devices, consider using .col-sm-* instead of .col-md-*. For medium screens, the size is ≥768px, and for small screens, it is ≥576px. Your choice may vary depending on your design preferences.

I have provided both solutions so you can maintain the layout for large devices or stack elements accordingly:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
  <div class="row border-bottom">
    <div class="col-sm-2 d-none d-md-block" style="-ms-flex: 0 0 125px;flex: 0 0 125px;">
       [logo image]
    </div>
    <div class="col-sm-8 d-md-block align-items-center justify-content-center">
      <h5> [school name]</h5>
      <p class="d-inline"> [city state]</p>

      <div class="row d-none d-sm-flex">
        <div class="col">Website</div>
        <div class="col">Setting</div>
        <div class="col">Size</div>
      </div>
   </div>
   <div class="col-sm-2 align-items-center" style="border:1px solid plum">
     <a class="btn btn-sm btn-collegeList align-items-center justify-content-center px-1 px-md-2"> profile</a>
   </div>
 </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
  <div class="row border-bottom">
    <div class="col-sm-2 d-none d-md-block" style="-ms-flex: 0 0 125px;flex: 0 0 125px;">
       [logo image]
    </div>
    <div class="col-sm-12 d-md-block align-items-center justify-content-center">
      <h5> [school name]</h5>
      <p class="d-inline"> [city state]</p>

      <div class="row d-none d-sm-flex">
        <div class="col">Website</div>
        <div class="col">Setting</div>
        <div class="col">Size</div>
      </div>
   </div>
   <div class="col-sm-12 align-items-center" style="border:1px solid plum">
     <a class="btn btn-sm btn-collegeList align-items-center justify-content-center px-1 px-md-2"> profile</a>
   </div>
 </div>
</body>
</html>

For more information on the Bootstrap Grid System, refer to Bootstrap Grid System.

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

Angular directive for concealing the 'ancestor' of an element

I have created a code snippet that effectively hides the 'grandparent' element of any '404' images on my webpage. Here is the code: function hideGrandparent(image){ image.parentNode.parentNode.style.display = 'none'; } < ...

javascripthtmlcssangularjsangularjs-directive

"Usage of Wildcard in CSS Selectors for customizable path selection

When it comes to identifying elements using CSS selectors, I rely on a combination of path and attribute-based selectors for accurate results. For instance: div[attribute='test'] > div > div > div > span[attribute='test'] ...

htmlcssselenium-webdrivercss-selectors

What is the best way to eliminate the space underneath a graph?

Despite trying multiple solutions, I'm still struggling to remove the excess blue space below the graph that appears when clicking the submit button. Any insights into what might be causing this issue? JSFIDDLE Below are the CSS styles related to t ...

javascriptjqueryhtmlcss

Uppercase the initial letter in a term to indicate a standard condition

I'm struggling to override the CSS in material UI. Even though I tried capitalizing both words, it only changes on selected and hover states, Is there a way to change it in the normal state as well? I've tried debugging but can't seem to fin ...

javascripthtmlcssreactjsmaterial-ui

Programmatically simulate a text cursor activation as if the user has physically clicked on the input

I have been attempting to input a value into a text field using JavaScript, similar to the Gmail email input tag. However, I encountered an issue with some fancy animations that are tied to certain events which I am unsure how to trigger, illustrated in th ...

javascripthtmlcssinputclick

When the direction is set to rtl, special characters that are supposed to be at the

When using the direction property for a label with windows style directory paths containing backslashes, I encountered an issue. The purpose of using direction:rtl; was to display the end part (file names) of the path. However, I found that I am getting th ...

csshtml

Angular Material Popup - Interactive Map from AGM

I am in the process of developing a material dialog to collect user location information using AGM (angular google maps). I have successfully implemented a map on my main page, but when the dialog is opened, it only shows a blank space instead of the map. ...

javascriptcssangulartypescriptangular-google-maps

Trigger a modal to open based on a specific condition

I have successfully implemented a default modal from Materialize, but now I am looking to add a conditional opening feature to it. In my application, there is a countdown timer and I want the modal to automatically appear when the countdown reaches a certa ...

javascripthtmljquerytwitter-bootstrap

Exploring the functions of Safari input types: search, reset, and normalize

Is there a proper way to reset the appearance of a search input so that it resembles a text field in Safari? screenshot I'm experiencing an issue with Safari where there is unwanted padding on the left side of the search input that I can't seem ...

css

What are the best strategies for optimizing my CSS drop down menu to be both responsive and mobile-friendly?

I am struggling to make my current CSS and HTML menu fully responsive and mobile-friendly. I have researched solutions from other sources but have been unable to implement them successfully. I am seeking help in modifying my menu so that it adjusts to smal ...

htmlcssdrop-down-menuresponsive-design

applying a blur effect to the Vue modal mask

Trying to incorporate a blur panel behind my modal using vue.js, however, The issue arises when the modal-mask contains nested content. This makes it challenging to apply the filter: blur() property without blurring everything. Currently, I am only able t ...

htmlcssvue.js

Designing a unique customized top navigation bar in Magento 1.9.2

I recently attempted to create a unique top menu in magento 1.9.2 by modifying the Navigation.php file located at app/code/core/Mage/catalog/Block/. I added some custom classes in an effort to customize the menu. In order to achieve this customization, I ...

phpcsstwitter-bootstrapmagento

The JavaScript code that added links to the mobile menu on smaller screens is no longer functioning properly

I recently created a website with a mobile navigation menu that should appear when the browser width is less than 1024px. However, I used some JavaScript (with jQuery) to include links to close the menu, but now the site is not displaying these links and t ...

javascriptjqueryhtmlcsswordpress

Line breaking by syllables using CSS

When it comes to CSS properties, the word-break attribute is able to split words across lines at specific points (such as the first character extending beyond a certain length). Surprisingly, there seems to be no existing CSS method (even with limited supp ...

htmlcsstypographyhyphenation

Creating a consistent height for Bootstrap 5 Carousel items with varying sizes

I am currently utilizing Bootstrap 5 carousel to display a collection of user-uploaded images that vary in height and width. I am seeking to create a carousel with responsive height and scaled/filled images. Below is the HTML + CSS code snippet I am using ...

htmlcsscarouselbootstrap-5

Expanding the width of CSS dropdown menus according to their content

When attempting to create a dynamic dropdown menu, I encountered an issue where the values were skewed in Internet Explorer if they exceeded the width of the dropdown. To fix this problem, I added select:hover{width:auto;position:absolute}. However, now th ...

javascripthtmlcssdrop-down-menu

Getting Your Content Centered Horizontally with Fixed Positioning in CSS

I would like the div to be centered horizontally with a fixed position, but it doesn't seem to work in my code. Can someone help me troubleshoot? Check out the demo here. HTML: <div id="fancybox-thumbs" class="bottom" style="width: 675px;"> ...

htmlcss

Sliding out the sidebar menu with Jquery

Hey there! I'm currently working on implementing a swipe feature for the side menu bar. I have already added a click method in my code, but now I also need to incorporate a swipe technique. When the side bar is opened, I want to remove the inside im ...

javascriptjqueryhtmlcss

Mouse over condensed text to show more information without impacting nearby elements

I have implemented a text-overflow: ellipsis on an element, and then added a hover effect to expand the text. How can I prevent this expanded text from affecting other elements above or below it? Here's how I've set the text: .box h3 { overfl ...

jqueryhtmlcss

The functionality for dragging elements is not functioning properly in JavaScript

Here is the code I used in an attempt to make a div element draggable: let div = document.querySelector('div') div.onmousedown = function() { div.addEventListener('mousemove', move, true) } window.onmouseup = function() { window. ...

javascripthtmlcss