CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
user8379139
user8379139

Reputation:

Bootstrap "Header / Jumbotron"

I am using the following code to create a header "logo" for a webpage: 

<header>
    <div class="jumbotron">
        <!-- insert logo here -->
    </div>
</header>

What is typically the best way / resolution to make the image in so that it consistently fits the entire jumbotron, but doesn't distort too much when shrunk to mobile / tablet sizes? Also, once I make the image, and src it where I have "insert logo here" is there CSS I can use to help with this problem?

Upvotes: 0

Views: 752

Answers (1)

demogorgon
demogorgon

Reputation: 484

If you are simply trying to make the image take up the entire jumbotron, then you can apply a class to your <img>, like .image and use CSS to style it as so:

.image {
  width: 100%;
  height: auto;
}

You will still see a slight background from the jumbotron class so I would suggest adding this: 

.jumbotron {
  padding:0;
}

As far as responsiveness, so that you know for any future needs, you can use @media to manipulate certain classes or tags for different screen sizes. Example: 

@media all and (max-width: 500px) {

    .image {
        width: 75%;
    }
}

This means that the width of all .image classes will be 75% for any screen size that is less than or equal to 500px.

Upvotes: 1

Related Questions