Decrease div width bootstrap

YRR 0
Viewed 57

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/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-primary">
      <div class="panel-body" style="background-color: black;">
        <img src="https://via.placeholder.com/100" class="Image" alt="Image">

        <div class="col text-center">
          <button type="button" class="btn btn-primary">Login as a Coach</button>
          <br/>
          <button type="button" class="btn btn-primary">Join as a Coach</button>
        </div>
      </div>
    </div>
  </div>
  <div>

html page

Expected Output:

Output Webpage should look somewhat like this

bootstrap-4 css html
3 Answers

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/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-center pt-2">
    <div class="col-sm-6 col-md-5 col-lg-4">
      <div class="bg-black text-center p-3 mb-3 rounded-lg">
        <img src="https://via.placeholder.com/600x400" class="img-fluid mb-2 rounded-lg" alt="">

        <button type="button" class="btn btn-primary btn-block">Log in as a Coach</button>
        <button type="button" class="btn btn-primary btn-block mt-2">Join as a Coach</button>
      </div>
    </div>

    <div class="col-sm-6 col-md-5 col-lg-4">
      <div class="bg-black text-center p-3 mb-3 rounded-lg">
        <img src="https://via.placeholder.com/600x400" class="img-fluid mb-2 rounded-lg" alt="">

        <button type="button" class="btn btn-primary btn-block">Log in as a Coach</button>
        <button type="button" class="btn btn-primary mt-2 btn-block">Join as a Coach</button>
      </div>
    </div>
  </div>
</div>

isherwood0

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/bootstrap@4.6.2/dist/css/bootstrap.min.css" crossorigin="anonymous">

<div class="container-fluid h-100 mh-100 d-flex align-content-sm-center">
    <div class="row align-content-sm-center pt-3">
        <div class="col-sm-6 pb-3">
            <div class="card border-0">
                <a href="#" class="card-img-top">
                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.webp" class="d-block img-fluid" alt="">
                </a>
                <div class="card-body">
                    <h5 class="card-title">Login as a Coach</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#!" class="btn btn-primary">Login</a>
                </div>
            </div>
        </div>
        <div class="col-sm-6 pb-3">
            <div class="card border-0">
                <a href="#" class="card-img-top">
                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/120.webp" class="d-block img-fluid" alt="">
                </a>
                <div class="card-body">
                    <h5 class="card-title">Join as a Coach</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#!" class="btn btn-primary">Join</a>
                </div>
            </div>
        </div>
    <div>
</div>

bron0 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-primary">
      <div class="panel-body" style="background-color: black;">
        <img src="https://via.placeholder.com/100" class="Image" alt="Image">

        <div class="col text-center">
          <button type="button" class="btn btn-primary">Login as a Coach</button>
          <br/>
          <button type="button" class="btn btn-primary">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/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-primary">
      <div class="panel-body" style="background-color: black;">
        <img src="https://via.placeholder.com/100" class="Image" alt="Image">

        <div class="col text-center">
          <button type="button" class="btn btn-primary">Login as a Coach</button>
          <br/>
          <button type="button" class="btn btn-primary">Join as a Coach</button>
        </div>
      </div>
    </div>
  </div>

ab_qayyum0
Related