Photoshop Question posted in
The official user guide can be found here.

Using bootstrap how can I do this? – Photoshop

Following the 12 grid system of bootstrap how would I place the image code below in example one below the class jumbotron text-centre in the centre? How would I use media queries to ensure the image is responsive and fits on all devices and browsers properly?

EXAMPLE 1

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" target="_blank">
          <img src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="picture of me" style="width:100%">
        </a>
      </div>
</div>

FULL SITE CODE 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Liam Docherty Digital Portfolio</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<style>
.body {
  font-family: "Lato", sans-serif
}

.img {
    width: 100%;
    height: auto;
}

.thumbmail {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 600px) {
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
</style>

<body>
<div class="container">
  <div class="jumbotron text-center">
    <h1>About Me</h1>
    <p>Find out more about me!</p>
  </div>
  <div class="row">
  <div class="col-md-4">
      <div class="thumbnail">
          <img src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="Nature" style="width:100%">
        </a>
      </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="well">
        <h3>Who am I?</h3>
        <p>My name is Liam Docherty and I'm 17 years old, currently studying at BLANK. In 2016 when I was taking my GCSE exams, I found my passion which was IT. My favourite topic within IT is software development. The reason how I found out this was my main passion with IT is because, I was assigned a task which was to create a website advertising myself to potential employees and really enjoyed learning multiple programming languages.</p>
        <p>Overall, I have multiple experience within a range of different sectors within IT. For example, I have knowledge of installing and maintaining hardware and software in a technology system. Moreover, I have experience using application software such as Adobe Photoshop CS6, Adobe Premier Pro CS6 and Adobe Illustrator CS6.</P>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="well">
        <h3>Skills I can offer</h3>
        <p>Front-end Development
          <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
          </ul>
        </p>
        <p>Installing and maintaining hardware such as
          <ul>
            <li>Upgrading RAM</li>
            <li>Installing network card</li>
            <li>Using air duster to reduce dust build up in fan component</li>
          </ul>
        </p>
        <p>Installing and maintaining software such as
          <ul>
            <li>Upgrading operating system</li>
            <li>Installing anti-virus application software</li>
            <li>Doing a defragment on hard drive</li>
          </ul>
        </p>
        <p>Experience using application software such as...
          <ul>
            <li>Adobe Photoshop CS6</li>
            <li>Adobe Premier Pro CS6</li>
            <li>Adobe Illustrator CS6</li>
          </ul>
        </p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="well">
        <h3>Future goals within IT</h3>
        <p><ul>
          <li>Improve my skills on using programming language javascript</li>
          <li>Learn how to use Adobe After Effects to improve editing skills</li>
          <li>Expand my knowledge on bootstrap</li>
        </ul></p>
      </div>
    </div>
    </div>
    </div>
</body>
</html>
Tags:

2

Answers


  1. 0

    As long as your Image has 100% width property, and height auto, your image gonna scale to it’s parent element. So Image size depends on .thumbnail parent, which inherits size of it’s parent, which is child of element, that has .col-sm-4 class (that class defines it’s size).

    Login or Signup to reply.
  2. 0

    refrencing to bootstrap documentation and code samples on sites like http://bootsnipp.com and http://getbootstrap.com/getting-started/ would help you in case you ever get lost in any bootstrap code.

    however to make an image responsive on all browser you need to add the class class="img-responsive" to the <img src tag which is same as adding style="width: 100%" height: "auto";

    to make it responsive, you would pick the major break point and style it just the way you want it to be.
    however my advice to you is to utilize all bootstrap tags and class, it ease your job of creating multiple breakpoints, for instance using col-md-12 on medium devices , col-sm-12 on small devices col-lg-12 on large devices.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search