Bootstrap - Border padding excessively wide

Question

Bootstrap - Border padding excessively wide

For a project exercise using bootstrap, I'm working on recreating a page that can be found here: https://codepen.io/freeCodeCamp/full/NNvBQW

I've hit a roadblock in trying to put a border around the image. Here's the code I have so far: https://codepen.io/krassheit/pen/mxmdWG?editors=1100

HTML

<div class="container">
  <div class="row" id="mainbox">
     <div class="col-xl">
       <h1 class="text-center">Dr. Norman Borlaug</h1>
       <h2 class="text-center"><em>The man who saved a billion lives</em></h2>
       <div id="test">
       </div>
       <figure class="figure mx-auto d-block image-box">      
          <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" class="img-fluid mx-auto d-block" alt="Placeholder">
          <figcaption class="figure-caption text-center"> Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</figcaption>
       </figure>      
    </div>
  </div>
</div>

CSS

body {background-color: gray;}

#mainbox {
  background-color: #eed2ee;  
}

.image-box{
    padding: 2px 2px 2px 2px;
    background-color: red;
    margin-left: 100px;
}

But I am encountering an issue with the border expanding too wide when the window size is increased. Only by resizing the window smaller than the native picture size do the borders adjust correctly to the intended padding. Attached are screenshots for reference:

Wide Narrow

html css twitter-bootstrap

Answer 1

Answer №1

The issue lies in the fact that the .image-box class has a CSS property of display:block;. This causes the div with that class to expand to full width on wide screens based on the screen resolution.

The solution is simple - you just need to change .image-box to display:inline-block;. Once you make this change, your image will no longer be centered. To center it again, set the parent div to text-align:center. That's all there is to it!

For more details, refer to this link: https://codepen.io/anon/pen/oqQZoe?editors=1100

Answer 2

The issue lies in the fact that the .image-box class has a CSS property of display:block;. This causes the div with that class to expand to full width on wide screens based on the screen resolution.

The solution is simple - you just need to change .image-box to display:inline-block;. Once you make this change, your image will no longer be centered. To center it again, set the parent div to text-align:center. That's all there is to it!

For more details, refer to this link: https://codepen.io/anon/pen/oqQZoe?editors=1100

Answer 3

Answer №2

I'm a bit confused about why the padding should be applied to the outer element. Can you provide some clarification?

Even after rewriting the code with the thumbnail class, the appearance remains unchanged. Here is the updated code:

<div class="container">
  <div class="row" id="mainbox">
     <div class="col-xl">
       <h1 class="text-center">Dr. Norman Borlaug</h1>
       <h2 class="text-center"><em>The man who saved a billion lives</em></h2>
       <div class="thumbnail image-box">
          <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Placeholder" class="img-fluid mx-auto d-block">
          <p class="text-center">Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</p>
       </div>      
    </div>
  </div>
</div>

I opt not to utilize the jumbotron class as I believe there should be a simpler solution available.

Answer 4

I'm a bit confused about why the padding should be applied to the outer element. Can you provide some clarification?

Even after rewriting the code with the thumbnail class, the appearance remains unchanged. Here is the updated code:

<div class="container">
  <div class="row" id="mainbox">
     <div class="col-xl">
       <h1 class="text-center">Dr. Norman Borlaug</h1>
       <h2 class="text-center"><em>The man who saved a billion lives</em></h2>
       <div class="thumbnail image-box">
          <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Placeholder" class="img-fluid mx-auto d-block">
          <p class="text-center">Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</p>
       </div>      
    </div>
  </div>
</div>

I opt not to utilize the jumbotron class as I believe there should be a simpler solution available.

Answer 5

Answer №3

Eliminate the figure element and simply use

<div class="img-thumbnail">
    <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
</div>

The padding should be on the outer element (outside #mainbox, inside .container). It's worth checking .jumbotron since that is what is used in the example page...

You could opt for using <figure>, however, applying the .mx-auto class will not have any impact unless the parent element is utilizing flexbox (can be activated by .d-flex)

Refer to .img-thumbnail in the Bootstrap documentation. Isn't that what you need? :)

Answer 6

Eliminate the figure element and simply use

<div class="img-thumbnail">
    <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
</div>

The padding should be on the outer element (outside #mainbox, inside .container). It's worth checking .jumbotron since that is what is used in the example page...

You could opt for using <figure>, however, applying the .mx-auto class will not have any impact unless the parent element is utilizing flexbox (can be activated by .d-flex)

Refer to .img-thumbnail in the Bootstrap documentation. Isn't that what you need? :)

Answer 7

Answer №4

The issue you're facing may be due to the lack of left and right padding assigned to the outer div. You can resolve this by incorporating the following HTML code.

<div class="container">
    <div id="mainbox">
        <div class="row">
            <div class="col-xl">
                <h1 class="text-center">Dr. Norman Borlaug</h1>
                <h2 class="text-center"><em>The man who saved a billion lives</em></h2>
                <div class="thumbnail image-box">
                    <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Placeholder" class="img-fluid mx-auto d-block">
                    <p class="text-center">Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Additionally, include the following CSS code.

body {background-color: gray;}
    #mainbox {
      background-color: #eed2ee;
      padding: 30px 60px;
    }
    .image-box{
      background-color: red;
      padding: 5px 5px 5px 5px;
    }
    .image-box img {
      width: 100%;
    }

Answer 8

The issue you're facing may be due to the lack of left and right padding assigned to the outer div. You can resolve this by incorporating the following HTML code.

<div class="container">
    <div id="mainbox">
        <div class="row">
            <div class="col-xl">
                <h1 class="text-center">Dr. Norman Borlaug</h1>
                <h2 class="text-center"><em>The man who saved a billion lives</em></h2>
                <div class="thumbnail image-box">
                    <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Placeholder" class="img-fluid mx-auto d-block">
                    <p class="text-center">Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Additionally, include the following CSS code.

body {background-color: gray;}
    #mainbox {
      background-color: #eed2ee;
      padding: 30px 60px;
    }
    .image-box{
      background-color: red;
      padding: 5px 5px 5px 5px;
    }
    .image-box img {
      width: 100%;
    }

Answer 9

Answer №5

Experiment with border styles

To add a border to your image, simply use the CSS style ".img-fluid"

.img-fluid{
    border-color: blue;
    border-style: solid;
}

Alternatively, you can match the width of the figure section to that of the image and apply the style there for the same visual effect.

Answer 10

Experiment with border styles

To add a border to your image, simply use the CSS style ".img-fluid"

.img-fluid{
    border-color: blue;
    border-style: solid;
}

Alternatively, you can match the width of the figure section to that of the image and apply the style there for the same visual effect.

Bootstrap - Border padding excessively wide

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Experiment with border styles

Similar questions

Leveraging SVG filters for enhancing text with unique borders

Optimal method for storing large arrays of numbers in localStorage using JavaScript

Div with CSS shadow on all sides

What is the best way to ensure that form inputs and labels stay aligned?

Tips for combining multiple fields into a single variable in PHP

Eliminating the issue of double scroll bars that overlap each other

Tips for utilizing the Toggle Slider JS functionality

Using JavaScript to display a line using `document.write`

Click to position custom text on image

Tips on how to showcase it to cover a wide area

What could be causing my jQuery to only toggle the first arrow in my HTML?

Add new information after modifying it

In search of a way to verify if a string contains a specific word

Animation in CSS/transform drifting out of view

An unexpected issue occurred: Unable to invoke method on NPObject

Generate a catalog of individual files within nested folders

Is there a way I can invoke my function prior to the form being submitted?

"Adjusting the height of a div element while considering the

What is the best way to create a sidebar that remains open without triggering a new sidebar every time it is clicked

Center the image and align the floated texts on each side horizontally