Achieving perfect alignment for flex items when wrapping in Bootstrap

I'm currently working with Bootstrap 4 and have the following code. On the page, there is a right item positioned on the right side, while several items are located on the left side:

---------------------------------------------------------------------
| item 1 item 2 item 3                                   Right item |
---------------------------------------------------------------------

However, when the screen size shrinks, I want them to be arranged like this instead:

---------------------------------------------
|            item 1 item 2 item 3           |
|                 Right item                |
---------------------------------------------

Right now it's almost happening as expected, but rather than that layout, I end up with this:

---------------------------------------------
| item 1 item 2 item 3                       |
| Right item                                 |
---------------------------------------------

To see the issue in action, check out this fiddle: https://jsfiddle.net/gax5n8qa/3/

Any suggestions on how I can achieve the desired layout?

twitter-bootstrapcssflexboxbootstrap-4

Answer №1

Utilize flexbox to center content only on smaller screens...

This method eliminates the need for using grid layouts or adding extra classes to child divs...

Check out the code here

<container class="my-class 
                  d-flex 
                  align-items-center 
                  justify-content-center
                  justify-content-sm-between
                  flex-sm-row
                  flex-column
                  px-2">
    <div>
        <a class="pr-2">Item 1</a>
        <a class="px-2">Item 2</a>
        <a class="pl-2">Item 3</a>
    </div>
    <div>Right Item</div>
</container>

This approach leverages the flexbox utilities responsively...

  • justify-content-center - horizontally centers on xs (default breakpoint)
  • justify-content-sm-between - adds space between on sm and larger devices
  • flex-sm-row - sets direction as row on sm and up
  • flex-column - changes direction to column (stacked) on xs

Answer №2

To align the content in a container div, use mr-auto and justify-content-center classes. You can resize the screen to see the effect in both the fiddle and snippet provided.

.my-class {
  margin: 100px auto;
  background-color: lightgrey;
  height: 60px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<Container class="my-class 
                  d-flex 
                  flex-wrap
                  align-items-center justify-content-center">
                  
                  
  
  
  <div class="col-auto mr-auto">
    <a class="pr-2">Item 1</a>
    <a class="px-2">Item 2</a>
    <a class="pl-2">Item 3</a>
  </div>
  <div class="col-auto">Right Item</div>
  
</Container>

Check out the demo on jsFiddle here!

Answer №3

Utilize grid breakpoints to organize columns and adjust text alignment based on screen size, ensuring optimal display on small screens.

<Container class="my-class 
                  d-flex 
                  align-items-center
                  flex-wrap
                  px-2">
  <div class="col-12 text-center col-md text-md-left">
    <a class="pr-2">Item 1</a>
    <a class="px-2">Item 2</a>
    <a class="pl-2">Item 3</a>
  </div>
  <div class="col-12 text-center col-md d-md-flex align-items-end flex-column">Right Item</div>
</Container>

Visit this link for more information

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

How can you provide unique css box shadows for various browsers without relying on browser detection?

I have observed that each browser displays box shadow blur radius a bit differently, so I want to ensure consistency across all browsers. However, since they use the unprefixed version, I need to provide different stylesheets for each browser. What is the ...

javascriptcsshtmlstylesheetbrowser-detection

Using ng-repeat in Angular causes the style of a div to become hidden

Utilizing angular ng-repeat to generate multiple divs, the original template html code is as follows: <div class="span5 noMarginLeft"> <div class="dark"> <h1>Timeline</h1> <div class="timeline"> <div c ...

htmlcssangularjs

explore the route with the help of jquery scrolling feature

Is there a way to implement scrolling functionality for tab headers similar to this demo? I have a list of elements within a div that I need to scroll like the tabs in the demo. I attempted to achieve this by setting the position of the inner elements to ...

javascriptjqueryhtmlcsstabs

Can you choose the class that has not yet been seen before?

Imagine a scenario where the following code is present: <div class="a"> <div>1</div> <div>2</div> <div> <div> <div class="b">3</div> </div> ...

css

Modify Bootstrap Card Styling Using JavaScript

When the clock strikes certain evening hours on my website, the Bootstrap card's default light style no longer fits the dark theme. I've attempted to switch the card to a dark style by tying in some JavaScript code, but it's not quite doing ...

javascripthtmlcssbootstrap-4

Difficulties encountered with CSS transitions when using the background

I stumbled upon some interesting examples on Stack Overflow about the fade effect on link hover. Curious, I decided to try it out myself and created this JSFiddle. <div class="fade"/> .fade { -o-transition: 0.3s; -moz-transition: 0.3s; -khtml-tran ...

htmlcssfirefoxcss-transitions

The computed style of a node in Chrome returns as null

In my javascript code, I have the following line: if(document.defaultView && document.defaultView.getComputedStyle){ strValue = document.defaultView.getComputedStyle(oElm).getPropertyValue(strCssRule); } // ... This code is used to retrieve a ...

javascriptcssdom

Concealing Website Elements with javascript based on class assignments

Despite my hesitation, I have to ask this question after unsuccessful searches in related articles. In my code, I have 7 nav links all with the same class. Due to the length of the HTML, I am looking for a way to hide contents until the link is clicked, an ...

javascriptcss

jquery slider for inputting phone number on a mobile device

I am currently working on enhancing the user interface by implementing a feature where users can select a mobile number using a slider. The idea is that the user will choose a digit between 0 and 9 using the slider, then confirm their selection by pressing ...

jqueryhtmlcsseventsslider

Add a CSS and jQuery hover effect to display text over an image, requiring users to click twice on their mobile device

I have a bunch of panels for different categories that change the background image when hovered over, display some introductory text, and lead to a URL when clicked. However, on mobile devices, you need to tap the panel twice to activate the URL. What I&a ...

javascriptjqueryhtmlioscss

Increase the size of the text box as more text is entered (similar to how it works

I am looking to replicate the comment feature from Facebook exactly. For instance, if I input a sentence that goes beyond the width of the textbox or hit enter for a new line, the textbox should drop down by one line to fit the new content. Visual Represe ...

javascriptjqueryhtmlcss

What is the method to set up the "materializecss" modal with the "before" (beforeload) feature?

Trying to implement the modal functionality in my project using the materializecss framework but facing some challenges. I have created a popup modal for an image with the code below: HTML: <div class="media-insert"> <a href="#img2" class="moda ...

javascriptjquerycssmaterial-design

What setting should I adjust in order to modify the color in question?

Looking to Customize Radar Chart Highlighted Line Colors https://i.sstatic.net/PqWc4.png I am currently working on a Radar Chart and I am trying to figure out which property needs to be edited in order to change the color of the highlighted lines. I have ...

javascriptcsstypescriptchart.jsstyling

Create a screen divided into two separate sections using horizontal split dividers

Trying to figure out how to set a div in HTML and then have a second div take up the remaining space. It seems like it should be simple, but I'm struggling with it. I'd like to have a div with a fixed height and then have another div take up the ...

htmlcss

How can I fix the issue of not being able to include a modal within a full-width Carousel in Bootstrap 4? Any suggestions on achieving this functionality successfully?

I am attempting to incorporate a modal into my full-width carousel, but it is not displaying correctly. Here is the code snippet I am using. <div id="carouselExampleControls" class="carousel slide customSlide slides" data-ride=" ...

htmlcssbootstrap-4bootstrap-modalbootstrap-carousel

Issues with the alignment of items in an item grid in CSS/HTML are causing the display to appear

I am experiencing an issue with the CSS formatting of a section on my website. The products in the product grid do not display properly in order when the screen size is too small. For instance, if you visit this specific site: and view it on a screen lar ...

htmlcssmagento

The navigation bar is obscuring the header on my website

I am facing an issue with creating a navigation bar that covers up the header text. I tried adjusting the margins to fix this problem but ended up moving the header along with the navigation bar. How can I ensure that the navigation bar remains fixed witho ...

htmlcss

Aligning HTML form with CSS styling

After researching various strategies on how to achieve this, and implementing the suggestions provided, I am still encountering difficulties. While the text successfully centers, the actual elements remain aligned to the left of the screen. Below is the f ...

htmlcss

Remove padding in Twitter Bootstrap table cells

One of my current projects requires making a button that fills the entire width and height of the TD element. I have attempted setting the normal .btn-warning with -Xpx!important, but it did not produce the desired result. Here is what I currently have: ...

csstwitter-bootstrapbutton

Tips on adjusting my script to focus on particular text within a div in HTML

I'm currently learning how to code and working on a text generator that allows users to edit text and export it as .DOCX. I came across this script called jsfiddl on the website npmjs, which enables exporting HTML to .DOCX. However, I'm having tr ...

javascripthtmlcssnpmms-word