CODEWITHSUNDEEP
csstwitter-bootstrap
am guru prasath
am guru prasath

Reputation: 293

Bootstrap text is overlapping on a image even when the columns are divided properly

Text with column width of col-lg-5 col-md-3are overlapping on the image of col-lg-5 col-md-3. Why is this happening is it a compulsion that I must use a container tag in Bootstrap and here is the JSfiddle link https://jsfiddle.net/oukdwoot/7/

HTML

<header>
    <div class="wrapper">
        <img src="https://placehold.it/84x33">
        <ol class="menu">
            <li><a href="">Contact</a>

            </li>
            <li><a href="">Work</a>

            </li>
            <li><a href="">About</a>

            </li>
            <li><a href="">Journal</a>

            </li>
        </ol>
    </div>
    <div class="main-wrapper">
        <div class="row">
            <div class="col-lg-5 col-sm-3">
                <img src="https://placehold.it/468x307">
            </div>
            <div class="col-lg-5 col-sm-3">
                    <h2>Duis aute irure dolor in henderit in voluptate.</h2>

                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo doconsequat, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur...</p>
            </div>
        </div>
    </div>
</header>

css

header {
    background: #242424;
    width: 100%;
    height: 126px;
    border-bottom: 4px solid #1e1e1e;
}
header .wrapper img {
    display: inline-block;
    margin-top: 49px;
}
.wrapper {
    width: 70%;
    margin: 0 auto;
    margin-bottom: 8%;
}
.menu {
    display: inline;
}
.menu li {
    display: inline-block;
    list-style: none;
    float: right;
    width: 15%;
    margin: 0;
    padding: 0;
    border-left: 2px solid #1e1e1e;
    padding: 55px 0 50px 0;
    text-align: center;
    vertical-align: center;
    color: white;
    font:bolder 1em Helvetica, arial, serif;
    letter-spacing: 2px;
}
.menu li:first-child {
    border-right: 2px solid #1e1e1e;
}
.menu li a {
    color: white;
    text-decoration: none;
}
.menu li:hover {
    border-bottom: 4px solid #58C93A;
    color: #58C93A;
    background: #262626;
}
.main-wrapper {
    width: 70%;
    margin: 0 auto;
}

Upvotes: 2

Views: 5887

Answers (3)

frankmurphy
frankmurphy

Reputation: 384

Google brought me here in 2022. Just to give an update for bootstrap 5, use: .img-fluid.

<img src="..." class="img-fluid" alt="...">

Explanation: "Responsive images Images in Bootstrap are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element."

See: https://getbootstrap.com/docs/5.0/content/images/

Upvotes: 1

Piotr Kula
Piotr Kula

Reputation: 9841

You may want to use the img-responsive class. It just the image is overflowing outside of the bootstrap DIV, which is normal behaviour in CSS for images.

<div class="main-wrapper">
        <div class="row">
            <div class="col-lg-5 col-sm-3">
                <img src="https://placehold.it/468x307" class="img-responsive">

Plus, it makes your image... responsive.

enter image description here

Upvotes: 4

Nolan Akash
Nolan Akash

Reputation: 1094

You need to use the img-responsive class in your img tag.

<img src="https://placehold.it/84x33" class="img-responsive" />

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; height: auto; and display: block; to the image so that it scales nicely to the parent element. - Bootstrap CSS

See more about Boostrap CSS's img components above.

Upvotes: 1

Related Questions