title: Vertically center elements using React-Bootstrap
body: <p>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.</p>
  <p>This is my Codesandbox: <a href="https://codesandbox.io/s/gifted-bartik-91keq?file=/src/ExportForm.jsx:0-2942" rel="nofollow noreferrer">Link</a></p>
  <p>Here is my code:</p>
  <pre><code>import React, { PureComponent } from &quot;react&quot;;
  
  import {
    ButtonGroup,
    Classes,
    H4,
    Icon,
    Intent,
    Tooltip
  } from &quot;@blueprintjs/core&quot;;
  import { IconNames } from &quot;@blueprintjs/icons&quot;;
  import { Box } from &quot;@rebass/grid&quot;;
  import { Container, Row, Col } from &quot;react-bootstrap&quot;;
  import cx from &quot;classnames&quot;;
  import &quot;styled-components/macro&quot;;
  
  import ExportSVG from &quot;./export.svg&quot;;
  
  import UploadFile from &quot;./UploadFile&quot;;
  
  const getFileExtension = file =&gt; {
    return file &amp;&amp; file[0].name.split(&quot;.&quot;)[file[0].name.split(&quot;.&quot;).length - 1];
  };
  
  const INITIAL_STATE = {
    error: null,
    isBusy: false,
    file: null,
    generatedFile: undefined,
    fileTypeError: false
  };
  
  const tooltipContent = &quot;Export this scenario data into an existing Excel file&quot;;
  
  class ExportForm extends PureComponent {
    state = INITIAL_STATE;
  
    render() {
      const { scenarioId } = this.props;
      const { isBusy, file, generatedFile } = this.state;
      return (
        &lt;Container style={{ backgroundColor: &quot;red&quot; }}&gt;
          &lt;Row className=&quot;justify-content-between&quot;&gt;
            &lt;Col xs={4}&gt;
              &lt;ButtonGroup&gt;
                &lt;Tooltip content={tooltipContent}&gt;
                  &lt;Icon intent={Intent.PRIMARY} icon={IconNames.HELP} /&gt;
                &lt;/Tooltip&gt;
                &lt;H4&gt;
                  &lt;Box as=&quot;span&quot; mx={2}&gt;
                    Export
                  &lt;/Box&gt;
                  &lt;img alt=&quot;&quot; src={ExportSVG} /&gt;
                &lt;/H4&gt;
              &lt;/ButtonGroup&gt;
            &lt;/Col&gt;
            &lt;Col xs={4}&gt;
              {!file &amp;&amp; !generatedFile &amp;&amp; (
                &lt;Box&gt;
                  &lt;input
                    type=&quot;file&quot;
                    id=&quot;uploadFileExport&quot;
                    accept=&quot;.xlsm&quot;
                    onChange={this.handleFileChange}
                  /&gt;
                  &lt;label
                    htmlFor=&quot;uploadFileExport&quot;
                    className={cx(Classes.BUTTON, Classes.INTENT_PRIMARY)}
                  &gt;
                    &lt;span&gt;Select file&lt;/span&gt;
                  &lt;/label&gt;
                &lt;/Box&gt;
              )}
            &lt;/Col&gt;
          &lt;/Row&gt;
          {file &amp;&amp; (
            &lt;Box mt={1}&gt;
              &lt;UploadFile
                isBusy={isBusy}
                fileExtension={&quot;.xlsm&quot;}
                file={file}
                handleCancelClick={this.handleCancelClick}
                uploadButtonText={&quot;Export&quot;}
                uploadIcon={&quot;cloud-download&quot;}
                fileUploadData={this.handleExport}
                handleFileChange={this.handleFileChange}
                uploadComment={`Upload for export from ${scenarioId}`}
              /&gt;
            &lt;/Box&gt;
          )}
        &lt;/Container&gt;
      );
    }
  
    handleCancelClick = () =&gt; this.setState(INITIAL_STATE);
  
    handleFileChange = event =&gt; {
      const { files } = event.currentTarget;
  
      if (getFileExtension(files) === &quot;xlsm&quot;) {
        this.setState({ file: files &amp;&amp; files[0], fileTypeError: false });
      } else {
        this.setState({ fileTypeError: true, file: null });
      }
    };
  }
  
  export default ExportForm;
  </code></pre>
  <p>This is what I have:</p>
  <p><a href="https://i.stack.imgur.com/AfuSF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AfuSF.png" alt="enter image description here" /></a></p>
  <p>The icons, text should be left aligned and center-aligned to the container and button right-aligned to the container.</p>
  <p>Please advice. Any help is appreciated.</p>