Vertically center elements using React-Bootstrap

Question

I would like to vertically center and center align elements using bootstrap but unable to achieve it. I use react-bootstrap col and row components.

This is my Codesandbox: Link

Here is my code:

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";

const getFileExtension = file => {
  return file && file[0].name.split(".")[file[0].name.split(".").length - 1];
};

const INITIAL_STATE = {
  error: null,
  isBusy: false,
  file: null,
  generatedFile: undefined,
  fileTypeError: false
};

const tooltipContent = "Export this scenario data into an existing Excel file";

class ExportForm extends PureComponent {
  state = INITIAL_STATE;

  render() {
    const { scenarioId } = this.props;
    const { isBusy, file, generatedFile } = this.state;
    return (
      <Container style={{ backgroundColor: "red" }}>
        <Row className="justify-content-between">
          <Col xs={4}>
            <ButtonGroup>
              <Tooltip content={tooltipContent}>
                <Icon intent={Intent.PRIMARY} icon={IconNames.HELP} />
              </Tooltip>
              <H4>
                <Box as="span" mx={2}>
                  Export
                </Box>
                <img alt="" src={ExportSVG} />
              </H4>
            </ButtonGroup>
          </Col>
          <Col xs={4}>
            {!file && !generatedFile && (
              <Box>
                <input
                  type="file"
                  id="uploadFileExport"
                  accept=".xlsm"
                  onChange={this.handleFileChange}
                />
                <label
                  htmlFor="uploadFileExport"
                  className={cx(Classes.BUTTON, Classes.INTENT_PRIMARY)}
                >
                  <span>Select file</span>
                </label>
              </Box>
            )}
          </Col>
        </Row>
        {file && (
          <Box mt={1}>
            <UploadFile
              isBusy={isBusy}
              fileExtension={".xlsm"}
              file={file}
              handleCancelClick={this.handleCancelClick}
              uploadButtonText={"Export"}
              uploadIcon={"cloud-download"}
              fileUploadData={this.handleExport}
              handleFileChange={this.handleFileChange}
              uploadComment={`Upload for export from ${scenarioId}`}
            />
          </Box>
        )}
      </Container>
    );
  }

  handleCancelClick = () => this.setState(INITIAL_STATE);

  handleFileChange = event => {
    const { files } = event.currentTarget;

    if (getFileExtension(files) === "xlsm") {
      this.setState({ file: files && files[0], fileTypeError: false });
    } else {
      this.setState({ fileTypeError: true, file: null });
    }
  };
}

export default ExportForm;

This is what I have:

The icons, text should be left aligned and center-aligned to the container and button right-aligned to the container.

Please advice. Any help is appreciated.

Answer 1

Here is my solution

Codesandbox

I have vertically centred content for the red section, using flexbox and putting some padding around it.

Since you are using bootstrap, I have used inbuilt bootstrap css classes.

Answer 2

here is the sand box link https://codesandbox.io/s/festive-curie-350xo?file=/src/ExportForm.jsx

you need to add height on the row and add align-items-center

ref: 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: BS has done it in that way

UPDATE: you can take help from here https://css-tricks.com/centering-css-complete-guide/