Align elements vertically with React-Bootstrap by using the built-in functionality for center

Struggling to vertically center and center align elements using bootstrap, even with react-bootstrap col and row components.

You can view my code on Codesandbox: Link

Here is the code snippet:

import React, { PureComponent } from "react";

import {
  ButtonGroup,
  Classes,
  H4,
  Icon,
  Intent,
  Tooltip
} from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
import { Box } from "@rebass/grid";
import { Container, Row, Col } from "react-bootstrap";
import cx from "classnames";
import "styled-components/macro";

import ExportSVG from "./export.svg";

import UploadFile from "./UploadFile";

// rest of the code remains the same

This is how it looks: https://i.sstatic.net/AfuSF.png

The aim is to have icons and text left-aligned, center-aligned to the container, and button right-aligned within the container.

Seeking advice and assistance, any input would be greatly appreciated.

Answer №1

Here is a link to the sandbox: https://codesandbox.io/s/festive-curie-350xo?file=/src/ExportForm.jsx

To make it work, remember to adjust the height of the row and add align-items-center

Reference: https://getbootstrap.com/docs/4.5/layout/grid/#vertical-alignment

<Row style={{ height: "100px" }} className="align-items-center">
  <Col> </Col>
  <Col xs="auto"> </Col>
</Row>

UPDATE: Bootstrap has implemented this approach as well

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

UPDATE: For additional guidance, you can refer to this resource https://css-tricks.com/centering-css-complete-guide/

Answer №2

Check out my solution below:

View on Codesandbox

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

I have successfully implemented vertical centering of content in the red section by leveraging flexbox and adding padding around it.

Additionally, I have incorporated the use of native Bootstrap CSS classes for seamless integration.

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 to remove an event listener when e.target points to a hyperlink

element, I encountered an issue using a slideshow component sourced from our components library. This component receives swipe events from a utility function that is initialized upon mounting. The problem arose while testing on a mobile phone - tapping a ...

Troubleshooting common issues while setting up React Native with TypeScript

After carefully following the steps outlined in this guide on configuring a React Native project using TypeScript: https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native, I encountered a total of fifteen errors from the ...

Error: Unable to access 'price' property of undefined - Next.js version 14.0.1

I'm encountering an issue with Next.js where my code is not working as expected. Interestingly, the same code works perfectly fine in other templates. let subTotal = 0 if (selectedProducts?.length) { for (let id of selectedProducts) { ...

Ways to ensure that an element is aligned within a parent div with a 100% bottom position

I am facing a small issue that I need help with. My problem is aligning an element to the top of a percent div with bottom: 100%, and I just can't seem to make it work within the parent div. Essentially, I want bottom: 0% to align with the bottom of ...

Prevent global filtering in React-table for a specific column while implementing a separate filter for the disabled column

Can I deactivate the global filter for a specific column in react-table, while still applying another filter to the deactivated column? Is there a way to achieve this, like in the image shown below: https://i.sstatic.net/TkRNJ.png ...

MaterialUI ReactJs API Data Selection Combo

Hello everyone, I'm relatively new to working with React and I've been using Material UI components, specifically the combobox, to show selected data from an API. Here is my code snippet: this.state = { data: [] , dataValue: ''} compo ...

Tips for creating test cases for Material UI tabs with react testing library

Currently, I am facing an issue with Material UI tabs in my application while using react testing library. I am looking for assistance in writing test cases to navigate from one tab to another. The code snippet provided below is not functioning properly. Y ...

How to modify the background color within the mat-menu-panel

Incorporating angular 9 and less into my current project, I have encountered an issue with a mat-menu-panel where my mat-menu-item is located. While I have successfully changed the color of my mat-menu-item, I am now faced with the challenge of changing th ...

I encounter difficulty utilizing assets within my React application

Currently, I am in the process of developing a React application for practice purposes. However, I have encountered an issue with using images and audio files stored in the assets folder. Despite my attempts to import them into the project, I have been uns ...

Looking for a reliable date and time picker for Material-UI version 5 in ReactJS. Can anyone recommend one?

I am looking to integrate a datetime picker into my ReactJS app that is based on Material-UI V5. After consulting the documentation, I found the recommendation to install @mui/x-date-pickers However, when attempting to do so, an error occurs: node@62 ...

Adjusting the content of mat-cards to fill in blank spaces

I have encountered an issue with the alignment in a list using mat-card. Here is my current layout: https://i.stack.imgur.com/VKSw4.jpg Here is the desired layout: https://i.stack.imgur.com/8jsiX.jpg The problem arises when the size of content inside a ...

"Encountering a 404 error during deployment with ExpressJS and React

My project functions correctly when run locally. To start it locally, I use the command npm run start in both the project root and client root simultaneously. I am currently developing a basic application with Express and Create React App. After successfu ...

What could be causing my wrapper div to not clear properly?

Something seems off with my wrapper div as it's not completely wrapping the children divs vertically. I made sure to clear both of the contained divs but it doesn't seem to be working properly. Any insight on why this might be happening? Check o ...

Is there a way to prevent my table from surpassing the width of my card using CSS?

My table inside a card is not responsive on small screens, causing it to go outside the card. I've tried various solutions like using flex on the parent element and setting the table width equal to the card but nothing seems to work. The card should a ...

Ensure that the search input field is in focus whenever the showSearch state is true

Having difficulty focusing on the input field whenever the showSearch state is true. Utilizing useRef and useEffect for this purpose. When the showSearch flag changes, the useEffect hook is triggered to check if showSearch is true, and if so, it should foc ...

The initial component update

I am new to React and currently working on a main component that includes a child component with a table. Upon mounting, I make an API request to fetch data which is then displayed in the table. My issue arises when, after the initial update of the child c ...

Failure to display masonry arrangement

I am working on creating a stunning masonry layout for my webpage using some beautiful images. Take a look at the code snippet below: CSS <style> .masonryImage{float:left;} </style> JavaScript <script src="ht ...

Is there a way to collapse child elements in a hover sidebar using Vuetify?

My project includes a sidebar that opens when I hover over it with the mouse. Everything works fine, but within the sidebar, there is a collapse dropdown menu. When I open this menu and then move the mouse away from the sidebar and back again, the collapse ...

I'm experiencing difficulties inserting data into my RECHARTS chart

I have several sets of data arrays from an API that I receive, and I need to use the [1] index of each array on the line and the [0] index on the axis of my chart. DATA SET 31) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2 ...

VUE component disregarding CSS styles

Check out my awesome VUE component below: <template> <div> <div class="bottom-footer"> {{msg}} </div> </div> </template> <script> export default { ...