I want to decrease the black background width wise to make it more proportional to image and buttons.

This is the code for one of the component on page. Similar is the code for the other component as well.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div  style="background-color: black;">
        <img src="https://via.placeholder.com/100"  alt="Image">

        <div >
          <button type="button" >Login as a Coach</button>
          <br/>
          <button type="button" >Join as a Coach</button>
        </div>
      </div>
    </div>
  </div>
  <div>

Expected Output:

CodePudding user response：

Sounds like you just want a more compact layout. You can do that with column configuration, as I've done here by reducing column size as screen size increases. I've also applied flexbox centering to the row with justify-content-center.

Note that I've eliminated the obsolete and unavailable panel classes and added a custom background class. I've also used Bootstrap's border radius classes on the boxes and various spacing classes for nicer fitment.

.bg-black {
  background: #000;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <img src="https://via.placeholder.com/600x400"  alt="">

        <button type="button" >Log in as a Coach</button>
        <button type="button" >Join as a Coach</button>
      </div>
    </div>

    <div >
      <div >
        <img src="https://via.placeholder.com/600x400"  alt="">

        <button type="button" >Log in as a Coach</button>
        <button type="button" >Join as a Coach</button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div  style="background-color: black;">
        <img src="https://via.placeholder.com/100"  alt="Image">

        <div >
          <button type="button" >Login as a Coach</button>
          <br/>
          <button type="button" >Join as a Coach</button>
        </div>
      </div>
    </div>
  </div>
  <div>

.panel-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
button.btn.btn-primary {
    width: 100%;
    margin: 5px 0;
    background: #0c82af;
    border-color: #0c82af;
    padding: 6px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div  style="background-color: black;">
        <img src="https://via.placeholder.com/100"  alt="Image">

        <div >
          <button type="button" >Login as a Coach</button>
          <br/>
          <button type="button" >Join as a Coach</button>
        </div>
      </div>
    </div>
  </div>

CodePudding user response：

A "card" template for Bootstrap 4. Both cards are vertically aligned on the page. On mobile phone they are stacked.

Using h-100 mh-100 on container-fluid will make full space from top to bottom. Vertical centering the cards is done with align-content-sm-center (sm meaning view width is min. 576px).

Click the 'Run code snippet' button and then click 'Full page' to see the difference between small and large browser view.

Update : removed some code that is not Bootstrap 4 related.

html, body {
  height: 100%;
}
body {
  background-color: black;
}
.container-fluid {
  /* edit this for another max width */
  max-width: 1140px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">

<div >
    <div >
        <div >
            <div >
                <a href="#" >
                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.webp"  alt="">
                </a>
                <div >
                    <h5 >Login as a Coach</h5>
                    <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#!" >Login</a>
                </div>
            </div>
        </div>
        <div >
            <div >
                <a href="#" >
                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/120.webp"  alt="">
                </a>
                <div >
                    <h5 >Join as a Coach</h5>
                    <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#!" >Join</a>
                </div>
            </div>
        </div>
    <div>
</div>