Clever Geek Handbook

Positioning images around text using bootstrap

Running a rest website and trying to use bootstrap to do this. I'm having a problem trying to position an image to the right of the text, near the right edge of a webpage.

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

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

And the 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 code link showing relevant code

+3


source to share


4 answers


Give pull-left

class to 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>
Run codeHide result


+1


source


According to your codep you need image after text, then you need to add

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



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


source


I will add some code for your code. float:left and float:right

will help you complete your task.

<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%
}
+2


source


If you are using bootstrap 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>

+1


source






More articles:


All Articles