Responsive Bootstrap container with flexible column layouts

Forgive me if this sounds silly, but I'm struggling to find an answer for what I want to accomplish...

I'm attempting to create a responsive container div (similar to a column inside a row).

For example, I would like to achieve the following effect:

<div className="container">
   <div className="row justify-content-center">
      <div className="col-lg-6 cold-sm-10">
         ...
      </div>
   </div>
</div>

but all in one line... something like:

<div className="container-lg-6 container-sm-10">
   ...
</div>

Is there a way in Bootstrap to achieve this?

I've tried using the classes container-sm but they don't work as expected.

csstwitter-bootstrapreact-bootstrapbootstrap-5

Answer №1

The containers do not function in that way. However, to achieve the desired layout, you can simply nest everything inside a .col-12.col-sm-10.col-lg-6 within a .row inside a .container-fluid

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce9f2edf2ec">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<div class="container-fluid p-0">
  <div class="row justify-content-center">
    <div class="col-12 col-sm-10 col-lg-6">


      <div class="row">
        <div class="col bg-primary">
          <h1>1</h1>
        </div>
        <div class="col bg-secondary">
          <h1>2</h1>
        </div>
        <div class="col bg-info">
          <h1>3</h1>
        </div>
      </div>
      <div class="row">
        <div class="col bg-info">
          <h1>4</h1>
        </div>
        <div class="col bg-primary">
          <h1>5</h1>
        </div>
      </div>


    </div>
  </div>
</div>

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 process for adjusting settings through selected options in a pop-up menu?

Here are the choices available: <form> <select id="poSelect" > <option selected disabled>Choose here</option> <option id="buyeroption" value="100101">I am a Buyer</option> ...

javascriptjqueryhtmlcss

The footer at the bottom of the page is currently malfunctioning

I was able to create an always on the bottom footer using code from Codepen. Here is the HTML: <div class="content"> <header> <p>blabla</p> </header> <main> <p>blaBlabla blub</p ...

htmlcssapachexampp

Tips for aligning a cluster of floating buttons at the center in Vuetify:

This is the code I am currently working with: <v-container height="0"> <v-row align="center" justify="center"> <v-hover v-slot:default="{ hover }" v-for="(option, index) in options" ...

htmlcssvue.jsvuetify.js

Unable to generate two tables

I have a dynamic table creation issue. The tables are meant to be created based on the user's input for the "super" value. For example, if the user inputs "2" for super, then it should create 2 tables. However, this is not happening as expected becaus ...

javascripthtmlcss

Unveiling the Secret: Empowering a Span to Secure its Territory Amidst an Adv

I have a comment section header where I want the senders name(s) (on the left) and time (on the right) to align at the top. <div style="float:left;">John Doe, Suzie Q</div><span class="pull-right"> Jan 30 at 10:29 PM</span> On s ...

htmlcss

Tips for customizing the color of mat-select placeholder text?

I've been attempting to modify the color of a mat-select placeholder. It functions properly when using 'background-color' but not when using 'color'. Below is my CSS code: /deep/ .mat-select-placeholder { color: red; } .mat-s ...

cssangularangular-material-5

Half of the sections will not stack on mobile devices

UPDATE I found and fixed a typo in the code, making adjustments to both the JSFiddle and this post to show the correction. The Headline is supposed to take up 100% height but currently isn't. Still seeking feedback on this issue. Everything looks per ...

htmlcsslayoutheightresponsive

Combining my CSS and JS files is causing code issues (works on my Mac, but not on the server)

Currently, I am in the process of merging my CSS and JS files before minifying them with the YUI compressor. My web application functions perfectly when each file is linked individually. Now, I am attempting to combine all the files into one single CSS fi ...

javascriptcssdeploymentcharacter-encoding

Issue with footer not remaining at the bottom of the page

I created a simple footer using CSS and Bootstrap. It seems to be working fine on most pages, but I'm facing an issue where on pages with minimal content, the footer appears at the end of the content rather than the bottom of the page. I've spen ...

htmlcsstwitter-bootstrap

Create a styled-components component that renders a cross inside a recognizable object surrounded by borders

Currently developing an Object Recognition app and aiming to add a border around the object along with a cross that indicates the center. The border has been successfully implemented, but having trouble creating the cross. The plan is to add two more boxes ...

javascriptcssreactjsstyled-componentstensorflow.js

deployJava.js injects a new <embed> element into the header section of the webpage

I've ran into an issue with the Java applets on my website. I included the deployJava.js load tag in the head section of the page, but when I look at the resulting HTML in Chrome debugger, this script seems to be breaking my head content and starting ...

javajavascripthtmlcssdeployjava

What is the best way to center a heading 2 element vertically within a div?

Can someone help me with aligning the h2 element vertically and horizontally in the center of the div? You can find my codepen here. html <div class="container"> <h2 class="center"> Hello World! </h2> </div> css: .c ...

htmlcss

What is the reason for padding influencing the overall dimensions?

The result I achieved was unexpected. After realizing that the text was positioned above the green markers, I decided to add some internal padding to the three pink containers. To my surprise and disappointment, when I made this adjustment, it ended up lo ...

css

How to adjust animation timing for various elements during a CSS 3D flip with a delay?

Here is a CSS flip setup that I have been working on in this fiddle: http://jsfiddle.net/6r82fzk6/ The Goal: I am trying to achieve a slower transition for the back element compared to everything else. The idea is to have the child element of the back fac ...

cssanimation3dtransition

The @viewport tag is malfunctioning on iOS devices when used in CSS

Due to certain limitations, I am unable to make any changes to the HTML code of the project I am currently working on. As a result, I am unable to include the following attribute: <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

htmlioscss

What is causing this animation to malfunction?

Could someone assist me in hiding this div-container for a brief period of 2 seconds? If you have any alternative suggestions, feel free to share them but, please refrain from using jQuery or JavaScript. #vcontainer { height: 450px; width: 100%; ba ...

htmlcssjquery-animatekeyframe

template for login page with google closure UI design

Just starting out with google closure... are there any templates provided by Google for creating a basic user registration/login page? Most of what I've found so far seems to focus on UI manipulation and DOM creation. ...

htmlcssgoogle-closuregoogle-closure-library

How to apply unique styles to multiple elements with the same class using jQuery?

How can I add different classes to multiple div elements with the same class based on their content? <div class = "flag"> Yes </div> <div class = "flag"> No </div> <div class = "flag"> Yes </div> <div class = "flag"& ...

javascripthtmljquerycss

Switch the designation to Hover Class

I am working with nested divs and have assigned a CSS class to one of the inner divs. How can I trigger the hover effect of the class (class.hover) when the user hovers over the outer div, even if they are not directly over the inner div? I believe this m ...

javascripthtmlcss

When using CSS border-width:1px, I notice that the borders aren't consistently thin

I'm attempting to add thin borders to a div. My CSS code is as follows: border: solid; border-width: 1px; However, the resulting borders appear unevenly thin in my browser. The borders on the left and bottom seem thicker than those on the right and ...

css