(CSS/HTML) How can i make this alignment in Bootstrap? (Left Text right image Grid)

Question

Im looking for help .. how can I make this box in Bootstrap with the Gridsystem? The Box Left centered Text and right Image like this? The Second Question is .. how can I make that the image go to the background when the size of the Browser is smaller.. like on the Image Image in background

Example: gumpyframework Tried:

        <div class="row text-center">
          <h2>Team</h2>
          <hr class="small">
          <div class="row">
            <div class="col-md-8">
              <p>Test Text</p>
            </div>
            <div class="col-md-6"><img src="img/test.png" id="africaPhoto" alt="Smiley face" width="80%">                </div>
          </div>
        </div>

Do you have some code to show your workings so far? – Dom Mar 07 '16 at 20:45 — Dom, Mar 07 '16 at 20:45
Added code snipped .. what i have tried so far – Johny Mar 07 '16 at 20:58 — Johny, Mar 07 '16 at 20:58

score 0 · Answer 1 · answered Mar 07 '16 at 21:17

Try to set the image as background-image on the whole section to properly display the image. You can move the image around using the background-position property. See the Mozilla Developer Network for more information.

.section {
  background-color: red;
  background-image: url('http://i.imgur.com/gowMz8A.jpg');
  background-position: right center;
  background-size: 30%;
  background-repeat: no-repeat;
  min-height: 300px;
}

.wrapper {
  max-width: 70%;
  margin: 0 auto;
  padding: 30px 0;
}

.text {
  width: 50%;
}

<section class="section">
  <div class="wrapper">
      <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum modi tenetur incidunt eveniet? Ut nesciunt ipsum, nulla nobis mollitia nemo tempora, architecto aliquid voluptatem vero maxime! Dolorem dolore natus delectus.

    </div>
  </div>

  
</section>

score 0 · Accepted Answer · answered Mar 07 '16 at 21:19

You can pretty much inspect any bootstrap website and find that html layout. You should also read the bootstrap documentation it explains how the grid system works and how to properly utilise it.

<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
  <div class="banner-text">
    <h1 class="text-info">
    Become a Surgeon!
    </h1>
    <p>Digital Surgeons is looking for an experienced web developer ....</p>
    <button class="btn btn-info">
    Apply Now
    </button>
  </div>
</div>
<div class="col-sm-4"><img class="hidden-xs" src="http://placehold.it/500x500" id="africaPhoto" alt="Smiley face" >                    </div>
</div>
</div>

To answer your second question, you can use the classes hidden-xs or hidden-sm to hide the image on smaller screen sizes likewise you can also use visible-xs to only show an element on a particular screen size you can also use custom classes such as media queries like this:

@media (max-width: 768px) {
  body {
    background-image:url('http://placehold.it/500x500');
  }
}

JSFiddle example

(CSS/HTML) How can i make this alignment in Bootstrap? (Left Text right image Grid)

2 Answers2