CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
arcade16
arcade16

Reputation: 1535

How to set card percentage width?

I am trying to have the following "cards" in my row div to take 70% of the space for the left card and 30% of the space for the right card. I tried setting the percentage width for each card but it doesn't seem to be working. enter image description here

<div class="row">
    <!-- Column -->
    <div class="col-lg-3 col-md-6" width="500px">
        <div class="card">
            <div class="card-body">
            <h5 class="card-title m-b-40">Company Name</h5>
                <h6 style='font-weight: bold;'>Company Overview</h6>
                <h6>Annual Revenue: 2,000,000,000</h6>
                <h6>Employees: 150,000</h6>
                <h6>Industry: Data Processing, Hosting, and Related Services</h6>
                <h6>Inherent Risk Industry: Information Processing</h6>
            </div>
            <div id="sparkline8" class="sparkchart"></div>
        </div>
    </div>
    <!-- Column -->
    <!-- Column -->
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Relative Risk</h5>
                <div class="d-flex no-block align-items-center m-t-20 m-b-20">
                    <div id="sparklinedash4"></div>
                    <div class="ml-auto">
                        <h2 class="text-danger"> <span class="counter">Medium</span></h2>
                        <h2 class=""> <span class="counter">999</span></h2>
                    </div>
                </div>
            </div>
            <div id="sparkline8" class="sparkchart"></div>
        </div>
    </div>
    <!-- Column -->
</div>

Upvotes: 0

Views: 2887

Answers (2)

user3589620
user3589620

Reputation:

The width in bootstrap should only be handled with columns. Don't set a width! If you want to have exact 70% and 30%, customize the grid here: https://getbootstrap.com/docs/3.3/customize/#grid-system (10 columns instead of 12). Set col-?-3 on the left side and col-?-7 on the right side.

If the exact width doesn't matter, you could take the standard-bootstrap-3-css and use 4 columns (33.33%) for the left side and 8 columns (66.66%) for the right side.

<div class="row">
  <!-- Column -->
  <div class="col-lg-4 col-md-4 col-xs-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title m-b-40">Company Name</h5>
        <h6 style='font-weight: bold;'>Company Overview</h6>
        <h6>Annual Revenue: 2,000,000,000</h6>
        <h6>Employees: 150,000</h6>
        <h6>Industry: Data Processing, Hosting, and Related Services</h6>
        <h6>Inherent Risk Industry: Information Processing</h6>
      </div>
      <div id="sparkline8" class="sparkchart"></div>
    </div>
  </div>
  <!-- Column -->
  <!-- Column -->
  <div class="col-lg-8 col-md-8 col-xs-8">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Relative Risk</h5>
        <div class="d-flex no-block align-items-center m-t-20 m-b-20">
          <div id="sparklinedash4"></div>
          <div class="ml-auto">
            <h2 class="text-danger"> <span class="counter">Medium</span></h2>
            <h2 class=""> <span class="counter">999</span></h2>
          </div>
        </div>
      </div>
      <div id="sparkline8" class="sparkchart"></div>
    </div>
  </div>
  <!-- Column -->
</div>

Upvotes: 1

Skromak
Skromak

Reputation: 560

Both of your divs have the same class name. You could do this in your css style file:

.col1{
    width: 70%;
}

.col2{
    width: 30%;
}

So reassign your first div class (col-lg-3 col-md-6 where you have width="500px") to col1 (or whatever you want) and your second div class (col-lg-3 col-md-6) to col2...

Hope this helps

Upvotes: 1

Related Questions