What is the best way to align my content so that it is centered only when there is an even

I just finished working on this codepen project.

Check it out here

The layout consists of one row with three columns, which are dynamically created. Sometimes the number of columns is even, other times it's odd.

When the number of columns is even, everything looks great!

See for yourself in this example

However, when there's an odd number of columns, like in the first scenario, the third column ends up being awkwardly positioned under the first row. How can I fix this?

Is there a way to detect when there are odd numbers of columns in a row, so that only that specific row defaults to aligning items at the start instead of centering them? This would ensure that 

THE THIRD COLUMN IS PLACED BELOW THE FIRST ONE
.

cssbootstrap-4

Answer №1

To achieve the desired layout, consider updating your class to justify-content-between

<div class="container">
  <div class="row justify-content-between">
    <div class="col-md-6 red">1</div>
    <div class="col-md-6 red">2</div>
    <div class="col-md-6 red">3</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

Utilize the design elements stored in the database within Django

I have a style stored in my database and I want to use it in a template, but I'm not sure how to do it. models.py class Post(models.Model): # ... body = models.TextField() # HTML style = models.TextField() # CSS # ... views.py ( ...

pythoncssdjango

The secondary linked stylesheet is not affecting the layout

I'm encountering an issue with linking a second stylesheet to my HTML document, and I'm struggling to identify the (hopefully glaringly obvious) problem. My method of linking stylesheets in the head is as follows: <!DOCTYPE HTML PUBLIC "-//W ...

htmlcss

The overlay image is not positioned correctly in the center

I am struggling with positioning a play icon overlay on the image in my list-group-item. The current issue is that the icon is centered on the entire list-group-item instead of just the image itself. I am working with bootstrap 4.4.1. Here is the HTML str ...

htmlcssbootstrap-4

Creating a looping animation on multiple elements using jQuery that makes them fade in and out at different intervals

I am currently working on creating a fade in and out animation for multiple elements using jquery. It's a bit complex to explain, so I will start by sharing the relevant code. $(document).ready(function() { $("#1").delay(0).animate({ ...

javascriptjqueryhtmlcss

The Materialize CSS tabs are aligning vertically below each other, but functioning correctly upon refreshing the page

When using materialize css tabs, all the divs load one below the other on the initial page load. If I refresh the page, it starts behaving properly. <div class="row"> <div class="col s12"> <ul class="tabs"> <li class="tab col s ...

javascripthtmlcssreactjsmaterialize

Require assistance in designing a webpage using DIV elements

I have a vision for how I want my webpage to look: Check out my mockup here: http://img64.imageshack.us/img64/5974/pagedh.jpg But, I'm not quite there yet. Here's my progress so far: I'm still learning about using <div> elements ins ...

htmlcssxhtmllayout

Control input for filtering and searching using Bootstrap

My goal is to create a search and filter user input field. I found an example on an old bootstrap page that showcases exactly what I need, but I'm facing some issues with displaying the results. Here's the Bootstrap example page. The search bar ...

cssbootstrap-4

What is the best method to choose the initial offspring of the primary brother or sister within a list item?

Is there a way to specifically target the nested li elements in my css selector? Check out the Demo li:first-child { background-color: rgb(236, 236, 236); list-style-type: none; margin-bottom: 3px; padding: 8px; } <ul> <li& ...

csssiblings

Tips on how to horizontally align an icon and text using Material UI

As a newcomer to Material UI, I am facing an issue where my icon and text are not aligned: What I'm aiming for: This is the code I have so far: <div style={{ display: 'inline-flex', VerticalAlign: 'text-bottom', Bo ...

htmlcssreactjsmaterial-ui

Button Click Not Allowing Webpage Scroll

I am currently in the process of developing a website that aims to incorporate a significant amount of motion and interactivity. The concept I have devised involves a scenario where clicking on a button from the "main menu" will trigger a horizontal and ve ...

javascriptjqueryhtmlcss

Blending the widths of native elements with those of Bootstrap columns

Having trouble aligning spans in a Bootstrap 3 form to degrade into a stack on mobile: From [station1] to [station2] at [time] From [station1] to [station2] at [time] While this code works to an extent: <div class="row"> <div class="col ...

csstwitter-bootstraptwitter-bootstrap-3

Placing a FontAwesome icon alongside the navigation bar on the same line

Upon login, the navigation bar experiences display issues. Prior to logging in: https://i.stack.imgur.com/ZKyGe.jpg Following successful login: https://i.stack.imgur.com/zyP3m.jpg An obstacle I'm facing involves the Log Out fontawesome icon wrappi ...

htmlcss

What are some different CSS options for setting the indentation of the first line of

I've encountered an issue with how the <p> text-indent property appears when a page is printed using Internet Explorer's Active-X plugin. Here is the relevant CSS: p { font-family: Calibri; font-size: 20pt; line-height: 1.75em; margin-bot ...

htmlcss

How can I create a hover effect for multiple divs sharing the same id using CSS or JavaScript in the easiest way possible?

When hovering, I want the opacity to be set at "0.3"; when not hovering, it should be set at "1". Additionally, the color of h2 and h3 in each div should transition from white to red. I have searched extensively online and tried to sol ...

javascripthtmlcsshovermousehover

"Concealing specific choices in Autocomplete with reactjs: A step-by-step guide

I am looking for a way to hide the selected option in a Dropdown menu so that it does not appear in the next dropdown. For example, if "Hockey" is selected in the first dropdown, it should not be displayed in the second dropdown; only "Baseball and badmint ...

cssreactjsmaterial-ui

Set a predefined height for an element, yet ensure it adjusts to fit within its container (with the option to overflow only if it reaches a minimum specified height)

Consider this setup: A heading text a main content block All inside a single parent container. .outer { max-height: 200px; background-color: green; } .inner { min-height: 50px; /*for illustration, default height is set higher than ou ...

htmlcssposition

What are some ways to enhance the speed of swipe and scrolling on mobile devices using Javascript, CSS, and HTML?

Dealing with slow scrolling on iPhones has been a challenge for me. The application was developed using Vue.js. I was able to increase the scrolling speed on desktop using Javascript, but unfortunately, it doesn't translate well to mobile devices due ...

javascripthtmlcssvue.js

Scrolling horizontally in Bootstrap 4 is a breeze

I'm having trouble implementing a horizontal scroll for a set of cards on mobile view with @media only screen and (max-width : 480px). I've checked out various resources, such as this one, but none seem to be working for me. One possible issue co ...

htmlcssbootstrap-4horizontal-scrolling

Issue with dropdown menu appearing beneath specific elements in Internet Explorer versions 7 and 8

I've been encountering some troublesome issues with a website I'm working on, specifically in Internet Explorer 7/8. On certain pages, the navigation elements are getting hidden below text and images, causing confusion for me. I've attempted ...

css

Failure in the application of CSS styles to HTML

I have set up a very simple thing, but it just won't work for some reason. The HTML document doesn't seem to be picking up on the CSS. When I click on the href attribute on line 6 in View Source, it shows me the file, so the browser can see it. I ...

htmlcssapache2