Place the image on the right side of the screen

Question

Place the image on the right side of the screen

Navigation

#1 by (0 votes)

0

How can I put the image in the right corner? See:

Thecode:

HTML

<sectionclass="apresentacao">
      <div class="container">
            <div class="row">
                        <div class="col-md-8 col-sm-9">
                        <h3>SEJA BEM-VINDO AO NOSSO SITE</h3>
              <span style="text-align: justify">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                <br><br>
                <h4>POR QUE NOSSO SITE?</h4>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                <br><br>
                <h4>NOSSOS SERVIÇOS</h4>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                <br><br>
                <h4>CUSTOMIZAÇÃO</h4>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                    </span>
            </div>
                    <div class="col-md-4 col-sm-3" align="right">
                        <img src="img/intro-bg.png" class="img-responsive">
                    </div>
          </div>
       </div>
  </section>

CSS

.apresentacao {
  background-color: #E6E6FA;
  border-top: 3px solid #B0C4DE;
    padding: 50px 0;
    color: #000;
}
.apresentacao h3 {
        color: #000;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}
.apresentacao p {
    color: #000;
    font-size: 15px;
}
.apresentacao .btn-primary {
    border-color: #002e5b;
    margin-top: 50px;
    color: #000;
}

When you throw a class container , it pops up the layout. See below:

I would like the image to be on the right side of the screen and the text should stay where it is.

css twitter-bootstrap bootstrap-3

asked by anonymous 10.06.2018 / 14:15

1 answer

I can not do Array (in JSON) in Typescript How do I start from Side using end="" with the Time Module included

score 0 · Answer 1

As you are using bootstrap, just change the container class to container-fluid .

.apresentacao {
    background-color: #E6E6FA;
    border-top: 3px solid #B0C4DE;
    padding: 50px 0;
    color: #000;
}
.apresentacao h3 {
    color: #000;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}
.apresentacao p {
    color: #000;
    font-size: 15px;
}
.apresentacao .btn-primary {
    border-color: #002e5b;
    margin-top: 50px;
    color: #000;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="apresentacao">
      <div class="container-fluid">
            <div class="row">
                  <div class="col-md-8 col-sm-9">
                        <h3>SEJA BEM-VINDO AO NOSSO SITE</h3>
                        <span style="text-align:justify">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                              <br><br>
                              <h4>POR QUE NOSSO SITE?</h4>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                              <br><br>
                              <h4>NOSSOS SERVIÇOS</h4>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                              <br><br>
                              <h4>CUSTOMIZAÇÃO</h4>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                       </span>
                  </div>
                  <div class="col-md-4 col-sm-3" align="right">
                       <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9lMIXR_TCUqcJTI_ap31AHy8ES-VTPXmy9czTHn7n2vrsgVdNYQ"class="img-responsive">
                  </div>
            </div>
       </div>
</section>