How do I get an image next to text?

Question

I am looking to get my certificate image and the text to the right of the image. I would like them to be next to each other regardless of window size.

<div class="ISO">
  <div class="container">
    <h2>Certification</h2>
    <section class="container">
      <div class="row">
        <figure class="col-sm-6">
          <img src="http://i.imgur.com/wQQP94Y.jpg">
        </figure>
        <figure class="col-sm-6">
          <p><u>GOVERNMENT SUB-CONTRACTOR INFORMATION</u>
            <br> CCR and ORCA Registered US Government Sub-Contractor
            <br> Company CAGE Code: 4STK5
            <br>
            <u>Business Certifications:</u>
            <br> Veteran Owned - Small Business
            <br> ISO 9001-2015 Certificate Number 16.127.1
            <br> Labor Surplus Region
            <br>
            <br>
            <u>NAICS Codes:</u>
            <br> 332710 – Machine Shops
            <br> 332721 – Precision Turned Product Manufacturing
            <br>
            <br>
            <u>Potential Federal Supply Classifications:</u>
            <br> 1005/1010 – Guns – 30mm – 75mm
            <br> 1650 – Aircraft Hydraulic, Vacuum and De-icing System Components
            <br> 1660 – Aircraft Air conditioning , heat and pressurizing equipment
            <br> 2590 – Miscellaneous vehicle components
            <br> 2910/2915 – Fuel System Components
            <br> 2930/ 2935 – Engine Cooling System Components
            <br> 4130 – Refrigeration and Air Conditioning components
            <br> 7320 – Kitchen Equipment and appliances (components)
            <br>
            <br>
          </p>
        </figure>
      </div>

https://jsfiddle.net/dhalldow/ggzf8acf/

@dippas I believe the issue was that the image was overflowing the left column. Once Bootstrap is included and the image is made responsive the DIVs align as the should. — hungerstar, Jun 01 '17 at 20:55

score 0 · Answer 1 · answered Jun 01 '17 at 20:40

You are using bootstrap classes but you haven't included bootstrap.css in your code. Either include bootstrap css or you can add your custom styles.

* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

.col-sm-6 {
    width: 50%;
    float: left;
}

img {
  width: 100%;
}

Add the following styles to your css.

Henrik Clausen · Answer 2 · 2017-06-01T20:45:20.943

0

Well just use the class col-xs-6 in stead of col-sm-6 and remember to scale those huge images

https://jsfiddle.net/L077a7nd/

edited Jun 01 '17 at 20:45

answered Jun 01 '17 at 20:40

Henrik Clausen

679
6
16

Hmm.. I wonder why a proven good ansver is downvoted? I really wish people had to comment when downvoting. – Henrik Clausen Jun 01 '17 at 20:49
Same thing happened with me. I also got downvoted inspite of writing the fact that bootstrap.css is missing :D – vijayscode Jun 01 '17 at 20:55
The issue isn't using `xs` vs `sm`. The issue is the image size and how it's affecting other elements. If you remove `width="100%'` from your JSFiddle it doesn't matter what column size is being used. Maybe that's why it got downvoted. – hungerstar Jun 01 '17 at 20:57
try making the screen xs size and the issue still appears so he has to bothuse col-xs-6 AND scale the image properly. Think I mentioned that. Well.. Never mind :) No harm done. – Henrik Clausen Jun 01 '17 at 21:08

score 0 · Answer 3 · answered Jun 01 '17 at 20:40

Is your problem that they doe not remain next to each other on a very small screen size? give your image a width of 100% and use xs for extra small not sm. xs will cover all screen sizes. Startin from the smallest. Also make sure you reference the bootstrap library on your page in order to use the bootstrap classes. P.S - if you want it to be image on the left and text on the right for all screen sizes there is jo need to use bootstrap. You can just give your image a width of 50% and your text elemenf an width of 50% in their own div. Or you can just let your text float right. Anyway here is bootstrap:

 <div class="row"><div class="col-xs-6"><img style="width:100%" src="http://i.imgur.com/wQQP94Y.jpg"></div><div class="col-xs-6"><p>random text on th right bla bla bla bla</p></div></div>

score 0 · Answer 4 · answered Jun 01 '17 at 21:14

do not forget to include bootstrap library, so it should work as expected from the class used. else rewrite it all ...

You can set a ratio to a container using vertical padding with %.

example below using a bg for both image , and a ratio. if you use a pseudo to size container's height, it allows you to set a max-height.

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}
/* start reset ratio and bg image */
.jumbotron {
  background: url(http://i.imgur.com/U0ZfxUe.jpg) no-repeat top center;
  background-size: cover;
  width: 100%;
  max-height:800px;
  overflow:hidden;
}
.jumbotron:before {
  content:'';
  display:inline-block;
  padding-top:66.7%;
}

.imgsz {width:100%;height:0;padding-top:129%;
  background:url(http://i.imgur.com/wQQP94Y.jpg);
  background-size:cover;
}
/* end demo ratio */

.header {
  background-color: #34495E;
}

.nav a {
  color: #fff;
  text-decoration: none;
}

.nav {
  list-style-type: none;
  margin: 0;
  padding: 20px 0;
}

.nav li {
  color: #fff;
  display: inline;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  margin-right: 25px;
  text-transform: uppercase;
}

.main {
  left: 0px top: 0px;
  text-align: left;
}

.main h1 {
  color: #2E86C1;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 70px;
  margin-top: 0;
  margin-bottom: 80px;
}

.btn-main {
  background-color: #333;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 40px;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-default {
  border: 2px double #34495E;
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 20px;
}

.supporting {
  padding-top: 80px;
  padding-bottom: 100px;
}

.supporting .col {
  float: left;
  width: 33%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.supporting img {
  height: 32px;
}

.supporting h2 {
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
  text-align: center;
}

.supporting p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 0 50px;
  margin-bottom: 40px;
}

.col {
  display: inline;
}

.clearfix {
  clear: both;
}

.history {
  border: 2px double #34495E;
}

.history h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.history p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  display: inline-block;
}

.history ul {
  margin: 0;
  padding-left: 30px;
}

.history ul li {
  margin: 0px;
  padding: 0px;
  text-indent: 0em;
  margin-left: 1em;
}

.history li {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
}

.About {
  border: 2px double #34495E;
}

.About h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.About p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  display: inline-block;
}

.Contact h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1;
}

.Contact p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  float: left;
  text-align: center;
}

.ISO h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1;
}

.ISO p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  float: right;
}

.footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
}

.footer p {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="header">
      <div class="container">
        <ul class="nav">
          <li><a href="tl.html">Home</a></li>
          <li><a href="About.html">About</a></li>
          <li><a href="Team.html">Team</a></li>
          <li><a href="Contact.html">Contact</a></li>
        </ul>
      </div>
    </div>
    <div class="jumbotron">
      <div class="container">
        <div class="main">

        </div>
      </div>
    </div>

    <div class="ISO">
      <div class="container">
        <h2>Certification</h2>
        <section class="container">
          <div class="row">
            <figure class="col-sm-6">
              <img src="http://i.imgur.com/wQQP94Y.jpg"  class="imgsz"/>
              
            </figure>
            <figure class="col-sm-6">
              <p><u>GOVERNMENT SUB-CONTRACTOR INFORMATION</u>
                <br> CCR and ORCA Registered US Government Sub-Contractor
                <br> Company CAGE Code: 4STK5
                <br>
                <u>Business Certifications:</u>
                <br> Veteran Owned - Small Business
                <br> ISO 9001-2015 Certificate Number 16.127.1
                <br> Labor Surplus Region
                <br>
                <br>
                <u>NAICS Codes:</u>
                <br> 332710 – Machine Shops
                <br> 332721 – Precision Turned Product Manufacturing
                <br>
                <br>
                <u>Potential Federal Supply Classifications:</u>
                <br> 1005/1010 – Guns – 30mm – 75mm
                <br> 1650 – Aircraft Hydraulic, Vacuum and De-icing System Components
                <br> 1660 – Aircraft Air conditioning , heat and pressurizing equipment
                <br> 2590 – Miscellaneous vehicle components
                <br> 2910/2915 – Fuel System Components
                <br> 2930/ 2935 – Engine Cooling System Components
                <br> 4130 – Refrigeration and Air Conditioning components
                <br> 7320 – Kitchen Equipment and appliances (components)
                <br>
                <br>
              </p>
            </figure>
          </div>

your own example fixed with bootstrap + max-width for img:

to load bootstrap:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

to fix max-width to the certificat

.row figure.col-sm-6 > img {
    max-width:100%;
}

snippet to run and test below

.row figure.col-sm-6>img {
  max-width: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.jumbotron {
  background: url(http://i.imgur.com/U0ZfxUe.jpg) no-repeat center center;
  background-size: 100% 100%;
  height: 800px;
  max-width: 100%;
}

.header {
  background-color: #34495E;
}

.nav a {
  color: #fff;
  text-decoration: none;
}

.nav {
  list-style-type: none;
  margin: 0;
  padding: 20px 0;
}

.nav li {
  color: #fff;
  display: inline;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  margin-right: 25px;
  text-transform: uppercase;
}

.main {
  left: 0px top: 0px;
  text-align: left;
}

.main h1 {
  color: #2E86C1;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 70px;
  margin-top: 0;
  margin-bottom: 80px;
}

.btn-main {
  background-color: #333;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 40px;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-default {
  border: 2px double #34495E;
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 20px;
}

.supporting {
  padding-top: 80px;
  padding-bottom: 100px;
}

.supporting .col {
  float: left;
  width: 33%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.supporting img {
  height: 32px;
}

.supporting h2 {
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
  text-align: center;
}

.supporting p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 0 50px;
  margin-bottom: 40px;
}

.col {
  display: inline;
}

.clearfix {
  clear: both;
}

.history {
  border: 2px double #34495E;
}

.history h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.history p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  display: inline-block;
}

.history ul {
  margin: 0;
  padding-left: 30px;
}

.history ul li {
  margin: 0px;
  padding: 0px;
  text-indent: 0em;
  margin-left: 1em;
}

.history li {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
}

.About {
  border: 2px double #34495E;
}

.About h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.About p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  display: inline-block;
}

.Contact h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1;
}

.Contact p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  float: left;
  text-align: center;
}

.ISO h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1;
}

.ISO p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  float: right;
}
.footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
}

.footer p {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />


<div class="header">
  <div class="container">
    <ul class="nav">
      <li><a href="tl.html">Home</a></li>
      <li><a href="About.html">About</a></li>
      <li><a href="Team.html">Team</a></li>
      <li><a href="Contact.html">Contact</a></li>
    </ul>
  </div>
</div>
<div class="jumbotron">
  <div class="container">
    <div class="main">

    </div>
  </div>
</div>

<div class="ISO">
  <div class="container">
    <h2>Certification</h2>
    <section class="container">
      <div class="row">
        <figure class="col-sm-6">
          <img src="http://i.imgur.com/wQQP94Y.jpg" class="imgsz" />

        </figure>
        <figure class="col-sm-6">
          <p><u>GOVERNMENT SUB-CONTRACTOR INFORMATION</u>
            <br> CCR and ORCA Registered US Government Sub-Contractor
            <br> Company CAGE Code: 4STK5
            <br>
            <u>Business Certifications:</u>
            <br> Veteran Owned - Small Business
            <br> ISO 9001-2015 Certificate Number 16.127.1
            <br> Labor Surplus Region
            <br>
            <br>
            <u>NAICS Codes:</u>
            <br> 332710 – Machine Shops
            <br> 332721 – Precision Turned Product Manufacturing
            <br>
            <br>
            <u>Potential Federal Supply Classifications:</u>
            <br> 1005/1010 – Guns – 30mm – 75mm
            <br> 1650 – Aircraft Hydraulic, Vacuum and De-icing System Components
            <br> 1660 – Aircraft Air conditioning , heat and pressurizing equipment
            <br> 2590 – Miscellaneous vehicle components
            <br> 2910/2915 – Fuel System Components
            <br> 2930/ 2935 – Engine Cooling System Components
            <br> 4130 – Refrigeration and Air Conditioning components
            <br> 7320 – Kitchen Equipment and appliances (components)
            <br>
            <br>
          </p>
        </figure>
      </div>

score 0 · Answer 5 · answered Jun 01 '17 at 22:49

Check whether your Bootstrap is properly added. after that add img-responsive class to img tag, it would solve your problem.

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.jumbotron {
  background: url(http://i.imgur.com/U0ZfxUe.jpg) no-repeat center center;
  background-size: 100% 100%;
  height: 800px;
  max-width: 100%;
}

.header {
  background-color: #34495E;
}

.nav a {
  color: #fff;
  text-decoration: none;
}

.nav {
  list-style-type: none;
  margin: 0;
  padding: 20px 0;
}

.nav li {
  color: #fff;
  display: inline;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  margin-right: 25px;
  text-transform: uppercase;
}

.main {
  left: 0px top: 0px;
  text-align: left;
}

.main h1 {
  color: #2E86C1;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 70px;
  margin-top: 0;
  margin-bottom: 80px;
}

.btn-main {
  background-color: #333;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 40px;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-default {
  border: 2px double #34495E;
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 20px;
}

.supporting {
  padding-top: 80px;
  padding-bottom: 100px;
}

.supporting .col {
  float: left;
  width: 33%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.supporting img {
  height: 32px;
}

.supporting h2 {
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
  text-align: center;
}

.supporting p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 0 50px;
  margin-bottom: 40px;
}

.col {
  display: inline;
}

.clearfix {
  clear: both;
}

.history {
  border: 2px double #34495E;
}

.history h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.history p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  display: inline-block;
}

.history ul {
  margin: 0;
  padding-left: 30px;
}

.history ul li {
  margin: 0px;
  padding: 0px;
  text-indent: 0em;
  margin-left: 1em;
}

.history li {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
}

.About {
  border: 2px double #34495E;
}

.About h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.About p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  display: inline-block;
}

.Contact h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1;
}

.Contact p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  float: left;
  text-align: center;
}

.ISO h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1;
}

.ISO p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  float: right;
}

.footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
}

.footer p {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
}

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="header">
      <div class="container">
        <ul class="nav">
          <li>
            <a href="tl.html">Home</a>
          </li>
          <li>
            <a href="About.html">About</a>
          </li>
          <li>
            <a href="Team.html">Team</a>
          </li>
          <li>
            <a href="Contact.html">Contact</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="jumbotron">
      <div class="container">
        <div class="main"></div>
      </div>
    </div>
    <div class="ISO">
      <div class="container">
        <h2 class="hero">Certification</h2>
        <section class="container">
          <div class="row">
            <div class="col-xs-6">
              <img class="img-responsive" src="http://i.imgur.com/wQQP94Y.jpg" />
            </div>
            <div class="col-xs-6">
              <p>
                <u class="warning">GOVERNMENT SUB-CONTRACTOR INFORMATION</u>
                <br />






 CR and ORCA Registered US Government Sub-Contractor
                                                                                                                                <br />






 Company CAGE Code: 4STK5
                                                                                                                                <br />
                <u>Business Certifications:</u>
                <br />






 Veteran Owned - Small Business
                                                                                                                                <br />






 ISO 9001-2015 Certificate Number 16.127.1
                                                                                                                                <br />






 Labor Surplus Region
                                                                                                                                <br />
                <br />
                <u>NAICS Codes:</u>
                <br />






 332710 – Machine Shops
                                                                                                                                <br />






 332721 – Precision Turned Product Manufacturing
                                                                                                                                <br />
                <br />
                <u>Potential Federal Supply Classifications:</u>
                <br />






 1005/1010 – Guns – 30mm – 75mm
                                                                                                                                <br />






 1650 – Aircraft Hydraulic, Vacuum and De-icing System Components
                                                                                                                                <br />






 1660 – Aircraft Air conditioning , heat and pressurizing equipment
                                                                                                                                <br />






 2590 – Miscellaneous vehicle components
                                                                                                                                <br />






 2910/2915 – Fuel System Components
                                                                                                                                <br />






 2930/ 2935 – Engine Cooling System Components
                                                                                                                                <br />






 4130 – Refrigeration and Air Conditioning components
                                                                                                                                <br />






 7320 – Kitchen Equipment and appliances (components)
                                                                                                                                <br />
                <br />
              </p>
            </div>
          </div>
        </section>
      </div>
    </div>
  </body>

</html>

If you want to appear next to each other on every windows size go for col-xs-6 otherwise col-sm-6 would be okay till small windows. the main problem is you have not included bootstrap.css and img-class to img tag — Khan Engineer, Jun 01 '17 at 22:59

How do I get an image next to text?

5 Answers5