What could be causing the DIV elements in this React Bootstrap list to not be centered?

I'm currently working on creating an image gallery using react-boostrap. Everything is scaling properly when I resize the page, but the images are still aligned to the left. Is there a way to center them instead?

<div class="container-fluid">
  <div class="row">
    <div class="page-content-centered">
      <div class="gallery>...</div>
      <div class="gallery>...</div>
      <div class="gallery>...</div>
      <div class="gallery>...</div>
      <div class="gallery>...</div>


.page-content-centered {
    padding: 1rem;
    text-align: center;
}

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}
cssbootstrap-4react-bootstrap

Answer №1

After some trial and error, I managed to come up with a solution. Below is the updated code that could be helpful to others. The HTML output by the React component remains the same as described in the original question. However, I did make some slight modifications to the class names.

const Gallery = (props) => {
    const pictures = props.pictures.pictures.map(function(element, index) {
        return (
            <div key={index} className="gallery">
                <div className="gallery-image-container">
                    <Link href={`/picture/${encodeURIComponent(element._id)}`}>
                        <Image fluid className="gallery-image" src={element.imgUrl} />
                    </Link>
                </div>
                <div className="gallery-info-container">
                    <p>{element.title}</p>
                    <p>{element.author}</p>
                </div>
            </div>
        );
    });

    return (
        <div className="gallery-container">
            {pictures}
        </div>
    )
}

export default Gallery;

CSS:

.gallery {
  padding: .5rem;
  margin: .5rem;
  border: .1rem solid #ccc;
  float: none;
  display: inline-block;

  &:hover {
    border: .1rem solid #777;
  }

  &-image {
    max-width: 100%;
    max-height: 100%;

    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    object-fit: contain;
  }

  &-image-container {
    width: 12rem;
    height: 12rem;
    position: relative;
    border: 1px solid blue;
  }

  &-info-container {
    //border: 1px solid green;
    margin-top: .2rem;
  }

}

Answer №2

It's worth mentioning that in your code example, you're not utilizing the react-bootstrap library. Instead, you're directly using bootstrap classes. React-bootstrap actually consists of components that have been re-implemented in React without relying on jQuery. Just because you're working on a React project and using bootstrap classes, it doesn't necessarily indicate that you're using "react-bootstrap".

Regarding your issue: You've unnecessarily wrapped your "row" with an extra div. Simply place the class alongside the row and then remove it - this will give you a proper row with 5 elements. If you need to center it, you can do so with "justify-content-center":

<div class="container-fluid">
      <div class="row page-content-centered justify-content-center">
        <div class="gallery">...</div>
        <div class="gallery">...</div>
        <div class="gallery">...</div>
        <div class="gallery">...</div>
        <div class="gallery">...</div>
      </div>
    </div>

https://codesandbox.io/s/kind-voice-bhskhx

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

Adjusting the size of content tags depending on their popularity

Currently, I am working on setting up a basic tagging system by following the database structure provided in this Stack Overflow post. My goal is to create a single page that showcases all the tags, with each tag being visually scaled based on its popular ...

javascriptjquerycsstwitter-bootstraptagging

Top solution for preventing text selection and image downloading exclusively on mobile devices

My plan is to use the following code to accomplish a specific goal: -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0); I& ...

javascriptjquerycss

My intention is to personalize the react-select component to suit my needs

My task involves changing the size of the arrow to be smaller and positioning it under the circle. Despite setting the width and height in the CSS, the desired effect is not achieved. To align with the UI requirements, I need to adjust the swiper-button- ...

htmlcssreactjs

The background color of social media links spills over onto other links, creating a messy overlap

I have been trying to confine the teal hover effect within the boundaries of my social media links. Despite adjusting padding, heights, and widths using CSS properties, the hover effect still extends beyond the right border. Here is how it appears without ...

htmlcss

Enter your phone number in the designated field

I am looking to receive mobile numbers from various countries as input. I attempted to achieve this using the following code: <input type="tel" minlength="8" maxlength="10" name="Number" id="Number" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" class="form-co ...

htmlvalidationbootstrap-4

What are the solutions for resolving problems with the display and functionality of a multi-page form in Internet Explorer?

I am currently working on a form and you can view it at this link: http://jsfiddle.net/pPWr3/14/ While the form displays correctly in Chrome and Firefox, I am experiencing display and functionality issues when using Internet Explorer 9. The problems inclu ...

jquerycssformsinternet-explorer

Ways to transfer data between Angular controller and jQuery

Looking for some guidance on how to toggle between two HTML divs based on user input validation using an Angular controller and jQuery animations. Each div contains input fields that need to be validated before moving on to the next stage. Here is a simpli ...

javascriptjquerycssangularjs

Dynamic Bootstrap Tab menu slider with movable functionality when the limit is reached

I am facing an issue with the tabs menu on my website. The tabs menu items can vary between 2 or 3 to even 20 or more. When the number of navigation items exceeds 10, they automatically drop to the second line, which you can see here. However, I don' ...

javascriptjqueryhtmlcsstwitter-bootstrap

Placement of navigation bar on top of picture

Creating a gaming website and encountering challenges with text alignment. The goal is to have the navbar text positioned on top of a customized navbar background. Current appearance navbar example <!DOCTYPE html> <html> <head> ...

htmlcss

Responsive full-screen background image display

Why is the background image not appearing as a full image on large screens but fitting fine on small screens? <!DOCTYPE html> <html dir="ltr"> <head> <meta charset="utf-8" dir="ltr" /> <title ...

cssimagebackgroundfrontend

Having trouble positioning items correctly in Bootstrap 4.5?

My attempt to align two elements in HTML using Bootstrap is not yielding the desired outcome. Here is the code I am currently using: <div class="row align-items-center"> <div class="col-auto"> <h6>Alignment Testing</h6> ...

htmlcssbootstrap-4

Unable to accommodate additional space, InputGroup is not utilizing the

Using react-bootstrap in my project, I have a component with the following code. I want the input and button to display together and fill up the entire space allocated by the Col. Although the input and button are displaying side by side, they are not ta ...

csstwitter-bootstrapreactjsreact-bootstrap

Creating a Pinterest-inspired CSS layout from scratch without using any additional plugins

If you want to check out my code on jsfiddle and learn how to create a style similar to Pinterest without using plugins, click on the link below. Within the code, there is a square Node.js diagram that I would like to position down the left side. http://j ...

jquerycsslayout

Using Rails to assign a page-specific CSS class within a shared layout

Is there a way to apply unique CSS classes to specific tags within a common layout? In my application.html.erb layout file, the application.css.scss is loaded using <%= stylesheet_link_tag "application". . . %>, which then includes all CSS files in ...

cssruby-on-railserb

Align a flex item in the center horizontally, even when neighboring items are different sizes

In a section element, I have 3 divs inside, and I am trying to horizontally center 'div 2'. The issue I am facing is that the adjacent divs are not the same size, so using "justify-content:center" is not effective. I came across a solution here ...

htmlcssflexbox

Troubleshooting: Ruby on Rails and Bootstrap dropdown issue

Having some issues with implementing the bootstrap dropdown functionality in my Ruby on Rails application's navigation bar. I have made sure to include all necessary JavaScript files. Below is the code snippet: <div class="dropdown-toggle" d ...

javascriptcssruby-on-railsrubytwitter-bootstrap

"Exploring ways to implement validation for multiple email addresses in a textarea using JQuery or JavaScript, while allowing the addresses to be separated by semicol

NOTE: Each email ID must be unique. An empty string value is allowed to be added. Email IDs should be separated by semicolons and commas. Basic validation of email IDs is necessary for entry. [![ $("#d-notification").focusout(function () { var ...

javascriptjqueryhtmlcss

Is it possible to resize an inline SVG element without modifying the <svg> tag?

Utilizing a Ruby gem known as rqrcode, I am able to create a QR code in SVG format and send it as an API response. Within my frontend (Vue.js), I am faced with the task of displaying the SVG at a specific size. Currently, my code appears as follows, rende ...

cssvue.jssvg

What is the best way to steer a vehicle in the desired direction by utilizing the arrow keys on the keyboard?

Image1 Image2 While using visual studio code, I noticed that I can move a car forwards and backwards with the arrow keys on the keyboard. However, it doesn't seem to turn when I try to move in opposite directions. Is there a way to achieve this thro ...

javascripthtmlcss

Unable to implement the bootstrap panel class as expected

It seems like the bootstrap panel class is not being applied in this code snippet: <div class="container main-content"> <div class="row"> <div class="col-sm-3"> <div class="panel panel-primary"> ...

csstwitter-bootstrap