How can I put inline radio controls in React-Bootstrap?

Question

I'm writing a personal Electron project with React-Bootstrap and Typescript but I can't put two radio controls next to each other. I followed the React-Bootstrap examples but it won't work. I'm not sure if it's just me or if I'm missing something. I also tried giving the inline props to the Form component, and writing it without the Container and Row components as well. I know it can be done playing around with the flex structure in Bootstrap but I'd rather stick to the React-Bootstrap components only.

import React from 'react';
import { Container, Row, Form  } from 'react-bootstrap';


const ExperimentTypeForm = () => {
  return (
    <Container fluid>
      <Row>
        <Form>
          <div key="inline-radio" className="mb-3">
            <Form.Check inline label="1" type="radio" id="inline-radio-1" />
            <Form.Check inline label="2" type="radio" id="inline-radio-2" />
          </div>
        </Form>
      </Row>
    </Container>
  )
}

export default ExperimentTypeForm;

score 1 · Accepted Answer · answered Jan 07 '21 at 07:56

I was missing the .css import from Bootstrap:

import 'bootstrap/dist/css/bootstrap.min.css';

At first I ignored it because I couldn't get it to compile due to some missing configuration in my webpack config file. But after some digging I found this great answer on how to add the Bootstrap stylesheet to the App.tsx component.

How can I put inline radio controls in React-Bootstrap?

1 Answers1