CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive
Eric Muriithi
Eric Muriithi

Reputation: 37

How to change the size on my bootstrapped image?

Hey guys so I'm working on a website but I have noticed the image below my sustainability header is too small, so I am trying to resize it to fit the full width of the browser but it's proved tricky. What could be the solution?

<section class="section" id="sustainability">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="text-center mb-4">
          <h3 class="text-primary text-uppercase medium-title">Sustainability</h3>
            <div class="row mt-5 pt-5">
              <div class="col-lg-5 col-sm-8">
                <div class="card border border-light shadow-none">
                  <div class="card-body bg-light">
                    <div class="box-shadow">
                      <img src="images/bg1.jpg" alt="Clean Haven Home page" class="img-fluid mx- 
                              auto d-block" >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>

Upvotes: 1

Views: 29

Answers (1)

johannchopin
johannchopin

Reputation: 14873

To fit the full width of the browser you can set his width to 100vw that mean 100% of the Viewport Width:

body {
  padding: 0;
  margin: 0;
}

.full-width {
  width: 100vw;
}
<p>Default width:</p>
<img src='https://i.sstatic.net/4iGwt.jpg?s=32&g=1' />

<p>Full width:</p>
<img src='https://i.sstatic.net/4iGwt.jpg?s=32&g=1' class='full-width' />

According to your html tree, this css selector should target the image:

#sustainability .card .card-body img {
  width: 100vw;
}

Upvotes: 1

Related Questions