How can I increase the distance between two buttons in React?

Question

I have two buttons that I wanted to part the distance between them. I'm using React Bootstrap

My Index.js

import logo from './logo.svg';
import './App.css';
import { Route, Switch, Link } from "react-router-dom";
import { Login } from './Login'
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import Carousel from 'react-bootstrap/Carousel'

function App() {
  return (
    <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container-fluid">
        <a class="navbar-brand" href="#">Requiem Music</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Songs</a>
            </li>
          </ul>
        </div>
      </div>
      </nav>
      <Carousel>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://c4.wallpaperflare.com/wallpaper/896/440/837/music-album-covers-the-beatles-abbey-road-wallpaper-preview.jpg"
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://c4.wallpaperflare.com/wallpaper/896/440/837/music-album-covers-the-beatles-abbey-road-wallpaper-preview.jpg"
      alt="Second slide"
    />

    <Carousel.Caption>
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://c4.wallpaperflare.com/wallpaper/896/440/837/music-album-covers-the-beatles-abbey-road-wallpaper-preview.jpg"
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>
      <Switch>
        <Route exact path="/" component={Login} />
      </Switch>
    </div>
  );
}

export default App;

Here's my path Login and the code with my two buttons that I want part. Login.js

import React from 'react'
import { Button } from 'react-bootstrap'
export const Login = () => {
    return (  
        <div className="container">
            <div className="login" >
                <Button variant="primary">Login</Button>{''}
                <Button variant="primary">Register</Button>{''}
            </div>
        </div>
    )
}

My two buttons there are in my image below, Login and Register, I just want to part them. I've trying part in two divs and use padding, margin and etc. But it didn't works, what can I do?

Answer 1

https://react-bootstrap.github.io/components/buttons/#examples

As you can see in the example of the link above, React-Bootstrap is using {'space'} character to separate buttons. This can be your case where is used empty string.

Answer 2

You could utilize react-bootstrap layout. https://react-bootstrap.github.io/layout/grid/ I recommend reading up on bootstrap before you use this aswell, it is a great tool.

import { Button, Row, Col } from 'react-bootstrap'

             <div className="container">
                    <Row className="login" >
                        <Col sm={1}>
                            <Button variant="primary">Login</Button>{''}
                        </Col>
                        <Col sm={1}>
                            <Button variant="primary">Register</Button>{''}
                        </Col>
                    </Row>
                </div>