CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
brownmamba
brownmamba

Reputation: 173

positioning images around text using bootstrap

Doing a website recreation and trying to use bootstrap to do it. I ran into a problem of trying to position an image to the right of some text near the right edge of the web page.

Using margin-top and margin-right moves the picture how I want but using margin-bottom seems to have no effect... which is what I need. Any idea what I am doing wrong?

Here's a link to my codepen: https://codepen.io/gkunthara/pen/eRXmoP

And releveant code:

HTML

<div class="second-content">

    <h2 class="second-header"> Bond Back Guarantee</h2>
    <p class="second-header-p text-left"> Moving homes in Sydney is 
stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not, 
    just notify us within 72 hours and we'll gladly return to reclean any 
    problem areas - free of charge.</p>
    <img class="first-pic pull-right gap-right" src="firstpic.png">

</div>

CSS:

.second-content .first-pic {

width: 30%;
border: solid black;
margin-right: 100px;
margin-bottom: 50px; /* no effect /*

}

EDIT: updated codepen link just showing relevant code

Upvotes: 3

Views: 406

Answers (4)

Kasunjith Bimal
Kasunjith Bimal

Reputation: 188

I add some section for your code. float:left and float:right help to do your task well.

<body>
    <div class="second-content">
        <div class="sec">
            <h2 class="second-header"> Bond Back Guarantee</h2>
        </div>
        <div class="sec">
            <p class="second-header-p text-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back ha
                s never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning.
                If not, just notify us within 72 hours and we'll gladly return to reclean any problem areas - free of charge.</p>
            <img class="first-pic pull-right gap-right" src="https://thumb.ibb.co/iBF9Ea/firstpic.png" alt="firstpic" border="0">
        </div>
    </div>
</body>

css

.second-content {
    height: 750px;
    background-color: #fff;
    border-style: solid;
}
.second-content .second-header {
    font-size: 46px;
    color: #3498DB;
    margin-top: 100px;
    margin-left: 150px;
}
.second-content .second-header-p {
    width: 50%;
    font-size: 120%;
    margin-left: 150px;
    line-height: 40px;
    margin-top: 25px;
    float:left;
}
.second-content .first-pic {

    width: 30%;
    border: solid black;
    float:right;
}
.sec{
  width:100%
}

Upvotes: 2

Saurav Jamwal
Saurav Jamwal

Reputation: 374

If you using bootstrap then use this code:

<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>

</head>
<body>

<section class="second-content">

<div class="col-md-8">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p text-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not, just notify us within 72 hours and we'll gladly return to reclean any problem areas - free of charge.</p>
</div>

<div class="col-md-4">
<img src="https://thumb.ibb.co/iBF9Ea/firstpic.png" />
</div>

</section>

</body>
</html>

Upvotes: 1

Supraja Ganji
Supraja Ganji

Reputation: 1207

Give pull-left class to your second-header-p.

.second-content {
    height: 750px;
    background-color: #fff;
    border-style: solid;
    padding: 20px;
}


.second-content .second-header {
    font-size: 46px;
    color: #3498DB;
}

.second-content .second-header-p {
    width: 65%;
    font-size: 120%;
    line-height: 40px;
}

.second-content .first-pic {

    width: 30%;
    border: solid black;

}
<head>
    <title> End of Lease Cleaning in Sydney</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    
  
    <div class="second-content">
        
        <h2 class="second-header"> Bond Back Guarantee</h2>
        <p class="second-header-p pull-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not, 
        just notify us within 72 hours and we'll gladly return to reclean any 
        problem areas - free of charge.</p>
        <img class="first-pic pull-right gap-right" src="https://thumb.ibb.co/iBF9Ea/firstpic.png" alt="firstpic" border="0">
    
    </div>
</body>

Upvotes: 1

Emipro Technologies Pvt. Ltd.
Emipro Technologies Pvt. Ltd.

Reputation: 14746

As per your codepen you wanted image after text then need to add

float:left in this class second-header-p text-left.

.second-header-p.text-left{
   float:left;
}

Upvotes: 2

Related Questions