Skip to main content
se añadieron 77 caracteres en el cuerpo
Origen Enlace
Rene Limon
  • 4.6k
  • 2
  • 22
  • 34

Puse un borde para verlo mejor, lo único que tiene que hacer es cambiar la clase del margin (mt-5) de lugar

UPDATE: Hice algunas modifcaciones per mantuve el grid como lo tenias.

  • Primero puse un col-12 para que abarque toda la pantalla
  • Después quite el justify-content-center de donde lo tenias y creé un nuevo div de tipo flex para poner el contenido y listo

.box {
  border: solid 1px red
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="row box">
  <div class="col-12 my-5">
    <div class="justify-content-center d-flex">
      <div class='text-center'>
        <img src="/Order Sumary/images/icon-music.svg" alt="">
        <span class="h6"> Annual Plan</span>
        <span class="text"><aclass="text d-block"><a href="">Change</a></span>
        <p>$59.99/year</p>
      </div>
    </div>
  </div>

</div>

Puse un borde para verlo mejor, lo único que tiene que hacer es cambiar la clase del margin (mt-5) de lugar

UPDATE: Hice algunas modifcaciones per mantuve el grid como lo tenias.

  • Primero puse un col-12 para que abarque toda la pantalla
  • Después quite el justify-content-center de donde lo tenias y creé un nuevo div de tipo flex para poner el contenido y listo

.box {
  border: solid 1px red
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="row box">
  <div class="col-12 my-5">
    <div class="justify-content-center d-flex">
      <div class='text-center'>
        <img src="/Order Sumary/images/icon-music.svg" alt="">
        <span class="h6"> Annual Plan</span>
        <span class="text"><a href="">Change</a></span>
        <p>$59.99/year</p>
      </div>
    </div>
  </div>

</div>

Puse un borde para verlo mejor, lo único que tiene que hacer es cambiar la clase del margin (mt-5) de lugar

UPDATE: Hice algunas modifcaciones per mantuve el grid como lo tenias.

  • Primero puse un col-12 para que abarque toda la pantalla
  • Después quite el justify-content-center de donde lo tenias y creé un nuevo div de tipo flex para poner el contenido y listo

.box {
  border: solid 1px red
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="row box">
  <div class="col-12 my-5">
    <div class="justify-content-center d-flex">
      <div class='text-center'>
        <img src="/Order Sumary/images/icon-music.svg" alt="">
        <span class="h6"> Annual Plan</span>
        <span class="text d-block"><a href="">Change</a></span>
        <p>$59.99/year</p>
      </div>
    </div>
  </div>

</div>

se añadieron 77 caracteres en el cuerpo
Origen Enlace
Rene Limon
  • 4.6k
  • 2
  • 22
  • 34

Puse un borde para verlo mejor, lo único que tiene que hacer es cambiar la clase del margin (mt-5) de lugar

UPDATE: Hice algunas modifcaciones per mantuve el grid como lo tenias.

  • Primero puse un col-12 para que abarque toda la pantalla
  • Después quite el justify-content-center de donde lo tenias y creé un nuevo div de tipo flex para poner el contenido y listo

.box {
  border: solid 1px red 
  }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

 <div class="row justifybox">
  <div class="col-12 my-5">
    <div class="justify-content-center box">d-flex">
      <div class="col-4 mtclass='text-5">center'>
        <img src="/Order Sumary/images/icon-music.svg" alt="">
        <span class="h6"> Annual Plan</span>
        <span class="text"><a href="">Change</a></span>
        <p>$59.99/year</p>
      </div>
      </div>
    </div>

</div>

Puse un borde para verlo mejor, lo único que tiene que hacer es cambiar la clase del margin (mt-5) de lugar

.box{
  border: solid 1px red 
  }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

 <div class="row justify-content-center box">
      <div class="col-4 mt-5">
        <img src="/Order Sumary/images/icon-music.svg" alt="">
        <span class="h6"> Annual Plan</span>
        <span class="text"><a href="">Change</a></span>
        <p>$59.99/year</p>
      </div>
      
    </div>

Puse un borde para verlo mejor, lo único que tiene que hacer es cambiar la clase del margin (mt-5) de lugar

UPDATE: Hice algunas modifcaciones per mantuve el grid como lo tenias.

  • Primero puse un col-12 para que abarque toda la pantalla
  • Después quite el justify-content-center de donde lo tenias y creé un nuevo div de tipo flex para poner el contenido y listo

.box {
  border: solid 1px red
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="row box">
  <div class="col-12 my-5">
    <div class="justify-content-center d-flex">
      <div class='text-center'>
        <img src="/Order Sumary/images/icon-music.svg" alt="">
        <span class="h6"> Annual Plan</span>
        <span class="text"><a href="">Change</a></span>
        <p>$59.99/year</p>
      </div>
    </div>
  </div>

</div>

Origen Enlace
Rene Limon
  • 4.6k
  • 2
  • 22
  • 34

Puse un borde para verlo mejor, lo único que tiene que hacer es cambiar la clase del margin (mt-5) de lugar

.box{
  border: solid 1px red 
  }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

 <div class="row justify-content-center box">
      <div class="col-4 mt-5">
        <img src="/Order Sumary/images/icon-music.svg" alt="">
        <span class="h6"> Annual Plan</span>
        <span class="text"><a href="">Change</a></span>
        <p>$59.99/year</p>
      </div>
      
    </div>