Is it possible for Bootstrap to arrange the 1st and 3rd columns next to the 2nd column

I am working on a design that needs to be responsive, with a simple layout on mobile:

[A]
[B]
[C]

However, on desktop, I want [B] to be larger and positioned to the right side, while A and C stack on the left.

[ A ][ B ]
[ C ][ B ]

I am wondering if Bootstrap 4 has the capability to achieve this, or if I will need to write custom grid CSS?

Update: here is an example showcasing the current layout:

.a { background-color: red; }
.b { background-color: blue; }
.c { background-color: green; }
img {max-width: 100%; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="a col-md-5">
      A
    </div>
    <div class="b col-md-7">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg" alt="B (should be right of A and C on desktop)" />
    </div>
    <div class="c col-md-5">
      <p>C (should be below A and left of B on desktop)</p>
    </div>
  </div>
</div>

https://codepen.io/nfriedly/pen/rqMLBw

Update 2: To provide further clarity, here are images illustrating the elements ([A] in red, [B] in blue with an image, [C] in green).

Current layout:

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

Desired layout:

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

csstwitter-bootstrapbootstrap-4

Answer №1

To ensure that [B] remains fixed on desktop screens and sticks to the right side of the container, apply the following CSS:

@media (min-width: 600px) {
  .container {position: relative;}
  .b {position: absolute; right: 0; top: 0;}
}

It's important to note that the 600px value should match your specific desktop break-point.

You can view a functional demohere.

Answer №2

Ultimately, it appears that Bootstrap's flexbox-based layout is unable to achieve this specific task.

As demonstrated by JoostS, the desired layout can be accomplished using a combination of positioning and !important tags, although this method deviates from traditional Bootstrap practices. It almost feels like forcing Bootstrap to comply through sheer determination.

Therefore, I have decided to abandon Bootstrap's grid system entirely and transition to a solution utilizing "display: grid":

.a { background-color: red; }
.b { background-color: blue; }
.c { background-color: green; }
img {max-width: 100%; }

@media (min-width: 768px) {
  .grid-container {
    border: 1px solid black;
    display: grid;
  }
  .b {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="grid-container">
    <div class="a">
      A
    </div>
    <div class="b">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg" alt="B (should be right of A and C on desktop)" />
    </div>
    <div class="c">
      <p>C (should be below A and left of B on desktop)</p>
    </div>
  </div>
</div>

https://codepen.io/nfriedly/pen/bmweKB?editors=1100

This approach allows me to achieve the desired outcome without feeling like I am resorting to workarounds or battling against my tools. While it may not be supported in older browsers, this limitation is acceptable for my specific needs.

Answer №3

If Bootstrap 4 is part of your toolkit, you have the flexibility to rearrange row columns using the 'order' property. For instance, if you'd like the C column to appear before the B column, you can easily achieve this with the following code:

C{ order : 1; }
B{ order : 2;}

Additionally, the A column is already set with an order of 0.

Answer №4

To explore the ordering classes available in Bootstrap, refer to their documentation (specifically the reordering section).

You can also customize the order based on screen size by using xs, sm, md, or lg options provided by Bootstrap.

<div class=“col-sm-3 order-md-3”>
    <p> sample </p>
 </div>

View a live example here

Alternatively, you can adjust column widths as shown in this example.

If this solution does not meet your needs, hopefully it provides insight on utilizing Bootstrap effectively.

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 highlighted current date is not being displayed in the Bootstrap datepicker pop-up

I am currently using Bootstrap datepicker through the Bootstrap-datepicker API. However, when I click the button to open the calendar/datepicker pop-up, it does not highlight the current date in blue font, as demonstrated in the API examples. This is the ...

javascriptjquerycsstwitter-bootstrapdatepicker

Trouble keeping HTML/Javascript/CSS Collapsible Menu closed after refreshing the page

My issue is that the collapsible menu I have created does not remain closed when the page is refreshed. Upon reloading the page, the collapsible menu is always fully expanded, even if it was collapsed before the refresh. This creates a problem as there is ...

javascripthtmlcssmenu

What is the best way to vertically center text within a selection box? (This is not referring to a select box or a div box)

While assigning a line-height to text elements like div, span, or p and dragging them in the browser, an unsightly empty space appears within the selection box: https://i.sstatic.net/Ws08H.png I am seeking a way to elevate the actual text content within ...

htmlcsstextalignmenttextselection

What are some techniques for concealing a rendered element retrieved using the fetch API?

Currently, I am grappling with a coding challenge that requires me to extract data from https://jsonplaceholder.typicode.com/users using the fetch API function along with bootstrap and jquery. To display the data in a div element, I utilized the array.map( ...

javascripthtmljquerycssangularjs

Tips for creating a scrolling iFrame that moves with the background

I have recently created a website with a unique design feature. The background image acts as a border surrounding the main content, which is located within an iFrame. However, I've encountered an issue where scrolling the iFrame does not affect the ba ...

cssscrollbarhtml

Having trouble with adding Jquery UI CSS to my project even after bundling

I have implemented jQuery UI in my small project, but the CSS styles are not being applied. The following bundle includes the necessary CSS files: bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( "~/Content/themes/base/jque ...

c#cssjquery-uiasp.net-mvc-5

"Optimizing the placement of a range slider for pricing options

As a beginner in HTML, CSS and JS, I recently faced the challenge of creating a price slider range on a website. However, I am struggling with repositioning it. After copying the code from this link, I noticed that the slider is positioned at the top of th ...

javascriptjqueryhtmlcssjquery-ui

The skipping of crucial text in tab focus is adversely affecting the accessibility of the website

My appbar contains an image link, a warning indicating the user's current environment, and details about the logged-in user. While testing accessibility with a screen reader, I noticed that tab focus skips over the user details in favor of a link in ...

cssmaterial-uiaccessibilityfocusscreen-readers

Eliminating the default inline style automatically

My goal is to hide a table row until a radio button is clicked. I attempted using display:none;, but it did not work. Upon inspecting the code in my developer tools, I noticed that the specific table row has a style attribute style="display: table-row; whi ...

jqueryhtmlcssinline-styles

Ensure that the standard icon is properly aligned with the stacked icon of equal size

Seeking guidance on aligning two icons to be the same size. Here is what I'm aiming for: https://i.sstatic.net/SHuH9.png However, in current development, they appear like this: https://i.sstatic.net/crfdl.png When attempting to resize the stack ic ...

htmlcssbootstrap-5font-awesome

Strip border and padding from Tailwind base styles

Currently, I am working on a project that involves using PrimeReact's Calendar component. However, I have run into an issue where the border and padding are missing from the design. To achieve dynamic theme switching, I have a themes.css file in my pu ...

cssnext.jstailwind-cssprimereact

Toggle the visibility of elements (such as a form) with a click of a link - Utilize ajax to

I'm attempting to use jQuery to toggle the visibility of a form. This functionality is triggered by clicking on a specific link... The goal is to hide all links with data-action="edit" and only display the form that follows the clicked link, as there ...

javascriptjqueryhtmlcss

Italicizing text may not display effectively across various devices

Does the bold text formatting differ based on the type of screen? This is JSX code in react: function App() { return ( // Problem Here <b className="info-text">Info:{" "}</b> ); } ReactDOM.render(<App />, document.getEle ...

cssreactjs

Easiest method to change cursor to 'wait' and then return all elements to their original state

On my website, there are certain CSS classes that define a specific cursor style when hovered over. I am trying to implement a feature where the cursor changes to a "wait" image whenever an AJAX call is initiated on any part of the page, and then reverts b ...

javascriptjquerycss

Can you provide an example of AngularJS and Bootstrap DatePicker directive in action?

I have come across several GitHub directive examples, but none of them have a functional JSFiddle. I have tried to make them work without success. It's surprising that this feature is not yet included in Angular-UI. ...

javascripttwitter-bootstrapangularjs

Creating a Select component in React without relying on the Material-UI library involves customizing a dropdown

Is there a way to achieve a material UI style Select component without using the material UI library in my project? I'm interested in moving the label to the top left corner when the Select is focused. export default function App({...props}) { retu ...

javascripthtmlcssmaterial-ui

Align text vertically within Bootstrap carousel area

I'm struggling with centering text both horizontally and vertically in a Bootstrap 4 carousel. I've set up the bootply with a carousel, but the text is stuck in the upper left corner instead of being centered on the screen. <div class="carou ...

htmlcsstwitter-bootstrapbootstrap-4

CSS Image Width Percentage Guide

After incorporating Bootstrap into my ASP.NET webpage, I ran into issues when using percentages in the width attribute. Strangely enough, everything worked fine when I switched to pixels instead of percentage. Check out the images below for a visual refere ...

htmlcssasp.netwidthbootstrap-4

I'm having trouble figuring out why my collapsible navigation bar isn't functioning properly

Hello, I have implemented Bootstrap on my website to create a collapsible navigation bar. However, when I resize the screen, the navigation bar collapses properly but clicking on the collapsible button does not expand it as expected. Here is my code: < ...

bootstrap-4navbar

The navigation bar's HTML hue

Currently working on a website design and looking to replicate the unique color gradient effect seen in the top navigation bar of Virgin America airlines' website (refer to the image linked below). Interested in any CSS/HTML techniques that could help ...

javascripthtmlcss