Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

119
Vistas
Space between elements in a column react boostrap

I want there to be many small buttons that go across the entire screen. My setup is currently like this

<Row>
    <Col>
        <label className="btn btn-light btn-sm" style={{fontSize: "10px" }}>button text</label>
        <label className="btn btn-light btn-sm" style={{fontSize: "10px" }}>button text</label>
        <label className="btn btn-light btn-sm" style={{fontSize: "10px" }}>button text</label>
        <label className="btn btn-light btn-sm" style={{fontSize: "10px" }}>button text</label>
        ... and so on
    </Col>
</Row>

The effect is achieved, however, the buttons are all touching each other. Is there any way to force a padding around individual elements of a Column? I can't seem to figure out where to put it. Thanks.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You have many possibilities. You could use margin or padding or - what I would prefer - use flexbox with gap property:

  • You could use given bootstrap classes and make Col a flexbox and use the gap property: <Col className="d-flex gap-2">
  • There is also a component for this called Stack: <Stack direction="horizontal" gap={2}>
  • Or, if you need custom gap size, use css in any way directly. For example with inline styles: <Col className="d-flex" style={{ gap: "13px" }}>

https://codesandbox.io/s/beautiful-darkness-91d2ho

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda