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

Tips for enhancing contrast in MUI dark theme modals

How to verify the parent nodes in a jstree

Exploring ways to transfer a function variable between files in React

PHP Pear Mail HTML Edition

Tips for importing font files from the node_module directory (specifically otf files)

The GET method is designed to automatically eliminate any trailing whitespace in the

Style large and small text side by side with CSS styling

Can a shape similar to an inverted circle be created using CSS and jQuery?

problem with placing text into input field

The .keypress() function isn't behaving as expected

I'm looking for a method in JavaScript that can search through my XML file to locate specific attributes and return the entire parent element containing that attribute. Can anyone help with

Techniques for Adding Background Color to Fieldset Border

Problem with selecting odd and even div elements

position property in div element disrupts slider functionality

Conditional rendering is effective for displaying a form item based on certain conditions, but it may not be as effective for

color of the foreground/background input in a dropdown menu that

Having difficulty inserting an image with style="background-image:url(' ')" in Rails from the database

Applying CSS styles to a shadow DOM element will not produce the desired visual

Preventing div elements from being highlighted when double-clicked

The placement is set to absolute, with a designated height