Creating a flexible row layout in Bootstrap 4 that adapts responsively

Here is the current layout of the page:

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

However, when resizing to a mobile screen, the flex boxes overflow the container:

https://i.sstatic.net/kI3ee.png
Html: 

       <div id="bars" class="d-flex flex-row text-white  text-center">
            <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
                <i class="fa fa-home d-block"></i> Home
            </div>
            <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
                 <i class="fa fa-graduation-cap d-block"></i> Resume
            </div>
            <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#work">
                 <i class="fa fa-folder-open d-block"></i> Work
            </div>
            <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
            <i class="fa fa-envelope d-block"></i> Contact
            </div>
            </div>

I have attempted to fix this with CSS media queries, but so far nothing has changed:

.port-item {
width: 30%;
}

@media(min-width: 768px) {
  #bars {
    flex-direction: column;
  }
}

Any suggestions on how to make them fit within the container or display in a column format?

htmlcsstwitter-bootstrapflexboxbootstrap-4

Answer №1

There may not be a need to utilize CSS for sorting since the Bootstrap classes are sufficient for this task.

Simply swap out your flex class "d-flex flex-row" with "d-flex flex-column d-sm-flex flex-sm-row"

and watch as your 4 items automatically stack on mobile and transition to side-by-side display above that

Answer №2

To prevent overflow of the container, ensure that the min-width is set to 0 for the port-item within a flexbox. By default, the min-width is auto for a flex item.

If you want to adjust the column flow for smaller devices, you can use media queries like the following:

@media screen and (max-width: 768px) {
  #bars {
    flex-direction: column !important;
  }
  .port-item {
    width: 100%;
  }
}

For a demonstration, refer to the code snippet below:

.port-item {
  width: 30%;
  min-width: 0;
}

@media screen and (max-width: 768px) {
  #bars {
    flex-direction: column !important;
  }
  .port-item {
    width: 100%;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div id="bars" class="d-flex flex-row text-white  text-center">
  <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
    <i class="fa fa-home d-block"></i> Home
  </div>
  <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
    <i class="fa fa-graduation-cap d-block"></i> Resume
  </div>
  <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#work">
    <i class="fa fa-folder-open d-block"></i> Work
  </div>
  <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
    <i class="fa fa-envelope d-block"></i> Contact
  </div>
</div>

Answer №3

I created this just for you :) :)

<div class="container-fluid d-flex flex-xl-row justify-content-xl-between flex-column">

<div class="bloc_1 p-2" style="background-color: red"> picture </div>

<div class="bloc_2 p-2" style="background-color: antiquewhite">
 <div class="d-flex flex-column">
     <div class="p-4"> Headline</div>
     <div class="d-flex flex-row justify-content-between">
         <div> Flex 1</div>
         <div> Flex 2</div>
         <div> Flex 3</div>
         <div> Flex 4</div>
     </div>
 </div>
</div>

This is how it looks in the initial state:

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

after resizing :

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

==> Feel free to check out the Bootstrap Flex documentation for more information:

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

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

Discover the hidden content within a div by hovering over it

Here is an example of a div: <div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tinc ...

javascriptjqueryhtmlcss

NgTemplate Bootstrap is not recognizing my CSS class

I made a CSS adjustment to alter the modal width to 50% instead of 100% of the screen. However, the class modal-content is being duplicated after the modification. https://i.sstatic.net/VZxM6.png https://i.sstatic.net/ahLkn.png CSS .modal-content{ ...

cssangularbootstrap-4bootstrap-modal

Sending a button to a form on the same page

I would like to make my Reserve Button located in the jumbotron section of my index.html file redirect to the form section when clicked. This way, when the reserve button is clicked, it will automatically scroll down to the form section at the bottom of th ...

htmlbootstrap-4

Using Zen coding to insert an image source from a selection of options

I am attempting to use zen coding to generate a series of img tags with the src attribute populated by a list of filenames. Below is the list of filenames I have, followed by the desired output: filenameA.jpg someotherone.jpg anotherimage.jpg sample.jpg ...

htmlemmet

The quantity addition and subtraction function is malfunctioning

I have implemented a quantity plus/minus feature in HTML which is embedded from a jQuery script provided below. jQuery.ajax({ type: "POST", url: "http://ayambrand-com-my-v1.cloudaccess.host/index.php?option=com_echa ...

jqueryhtmlajax

JavaScript allows for inserting one HTML tag into another by using the `appendChild()` method. This method

My goal is to insert a <div id="all_content"> element into the <sector id="all_field"> element using Javascript <section id="all_field"></section> <div id="all_content"> <h1>---&nbsp;&nbsp;Meeting Room Booki ...

javascriptjqueryhtml

Running a Node.js script on an Express.js server using an HTML button

I've got an HTML button: <button id="save" type="button" onclick="save()">Save</button> and in my JavaScript code, I want it to execute something on the server side using node.js Here's what I have in mind: function save() { / ...

javascripthtmlnode.jsexpress

highlight the selected option in the ng-repeat list of items

Looking for some assistance with a coding problem I'm having. I keep running into an error when trying to make a selected item in an ng-repeat list highlight. The CSS style is only applied on the second click, not the first. Additionally, I need to en ...

javascripthtmlcssangularjs

What causes Font Awesome 5 icons to vanish when changing the font-family?

I am facing an issue with the code I have below. It changes the font style successfully, but it also causes the icon to disappear. Can anyone provide tips on how to ensure that the icon remains visible while changing the font style? <link rel="styles ...

cssfont-awesomefont-awesome-5

`Why are my overflow-x and flex-wrap not functioning as expected in React JS?`

Having trouble aligning all the movie posters in a single line? It appears that your overflow-x and flex-wrap properties aren't functioning as expected in your App.css. Here's a snippet of your App.css: body { background: #141414; color: ...

cssreactjsrowoverflow

Establish the container with a specific height and enable scrolling functionality

Here is the code snippet I am currently working with: <section class="table"> <div class="table-row"> <div class="table-cell"></div> <div class="table-cell"></div> <div class="table-cell"></div> ...

htmlcss

Performing a validation on data fetched using a .load() function

I've been struggling with a persistent issue that I just can't seem to solve. So, here's the situation: I have a blog post on a CMS that I'm developing. The content is saved within a div with its own unique ID. When the user clicks an ...

javascriptphpjqueryhtmlajax

The dimensions of the box remain fixed and do not change when the screen is resized

Just starting out with HTML and CSS and trying to create a responsive website. Running into an issue where the black striped box on my page is not moving up when I resize the screen. It appears to be stuck in place, causing a gap between it and the slide s ...

csshtml

Using AngularJS to bind to the 'src' property of an <img> tag

There is a table on my website with numerous rows, and each row contains a preview image that should appear in the top right corner when the mouse hovers over it. I attempted to insert an image tag with AngularJS binding for the URL in the src attribute l ...

javascripthtmlangularjsimagebrowser

Assess the scss styles specific to components following the global min.css in a React application

ISSUE Imagine we have a min.css file that needs to be imported globally: index.js import ReactDOM from "react-dom"; import App from "src/App"; import "library/library.min.css"; ReactDOM.render(<App />, document.getE ...

javascriptcssreactjsperformancesass

Take away the Link Navigation feature for dates on the calendar

I need to eliminate the link associated with the date shown in a SharePoint calendar list. Despite using developer's tools, I cannot locate an anchor tag to disable using CSS. My goal is to accomplish this task solely through CSS. Here is the code sn ...

htmlcss

Is there a way for an inline element like <a> to enclose block level elements within it?

<a href="#"> <h1>Our Premier Package</h1> <h2>The top choice among our clients</h2> <p> Enjoy expanded storage and quicker assistance to guarantee constant access to your cruci ...

html

The requested external js scripts could not be found and resulted in a net::ERR_ABORTED 404 error

import express, { Express, Request, Response } from 'express'; const path = require("path"); import dotenv from 'dotenv'; dotenv.config(); const PORT = process.env.PORT || 5000; const app = express(); app.use(express.static(path.join ...

javascripthtmlnode.js

What is the best way to pinpoint a specific Highcharts path element?

I am currently working on drawing paths over a graph, and I am looking to dynamically change their color upon hovering over another element on the page - specifically, a list of data points displayed in a div located on the right side of my webpage. Below ...

javascriptjqueryhtmlcsshighcharts

What is the process for incorporating a Bootstrap link into a specific ReactJS file?

In my current project using React JS, I found the need to incorporate Bootstrap in certain pages. To do this, I initially placed the following code snippet in the Public folder within index.html: <link rel="stylesheet" href="https://netdna.bootstrapc ...

javascriptcssreactjsbootstrap-4