My code is currently experiencing an issue - I'm trying to figure out how to center a

Can anyone help me troubleshoot the code in my attempt to make an image responsive and center it? I've been struggling with this issue and can't figure out what I'm doing wrong. Here's an example of how it currently looks on my screen: 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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>
<body>

  <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" class="img-responsive center-block" />
         </a>
      </div>
     </div>
   </div>
  </div>

</body>
</html>
csstwitter-bootstraptwitter-bootstrap-3

Answer №1

If you want to center content for large desktops, simply add col-lg-12.

body .jumbotron {
  background-color: #01BAEF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

  <div class="container">
    <div class="jumbotron text-center">
      <h1>About Me</h1>
      <p>Find out more about me!</p>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-lg-12">
          <div class="thumbnail">
            <a href="/w3images/lights.jpg" target="_blank">
              <img src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="..." class="img-responsive" />
            </a>
          </div>
        </div>
      </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 Hackney Community College. 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</p>
          <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
          </ul>
          <p>Installing and maintaining hardware such as</p>
          <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>Installing and maintaining software such as </p>
          <ul>
            <li>Installing an operating system</li>
            <li>Installing anti-virus application software</li>
            <li>Doing a defragment on hard drive</li>
          </ul>

          <p>Experience using application software such as...</p>
          <ul>
            <li>Adobe Photoshop CS6</li>
            <li>Adobe Premier Pro CS6</li>
            <li>Adobe Illustrator CS6</li>
          </ul>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="well">
          <h3>Future goals within IT</h3>
          <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>
        </div>
      </div>
    </div>
  </div>

Answer №2

You can center the image using offset as well.

 <div class="container">
<div class="row>
 <div class="col-md-4 col-md-offset-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" class="img-responsive center-block" />
     </a>
  </div>
 </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for me to customize the CSS of the masterpage for a specific aspx file?

Recently, I completed a website that was almost ready to be published. However, my client now wants to add a new page with similar content as the main masterpage (including the logo, menu, and a few buttons), but with some changes in colors and background ...

htmlcssvb.net

Using Angular: How to access a component variable within a CSS file

I'm having issues with my css file and attempting to achieve the following: .login-wrapper { background-image: url({{imagePath}}); } Below is my component code: export class LoginComponent implements OnInit { imagePath: any = 'assets/discord ...

cssangular

Swipe horizontally on mobile devices with text scrolling

I stumbled upon a workaround online that effectively allows for horizontal scrolling on mobile devices. <div style="max-width: 1024px; margin: auto; "> <ul style="white-space: nowrap; overflow-y: hidden; overflow-x: scroll; -webkit-overflow-sc ...

htmlcssmobilewebkit

What could be causing the header of the datatable to be out of alignment with the rest of

I'm facing an issue with my datatable where the header is misaligned with the content. Can someone please assist me in adjusting the header and content so that they are parallel? It doesn't look right at the moment. <div style="margin-top:1 ...

javascriptjqueryhtmlcss

Alter the color of textbox text using JavaScript

I have a text input field. When clicked, I want to change the text color style using JavaScript. Previously, I successfully achieved clearing the inner content of the textbox when clicked and reverting to the default version on blur. This code is currently ...

javascripthtmlcsstextbox

"Exploring the Power of Jsoup for Selecting

I'm attempting to extract all the links nested within the div class news column index. Here is a snippet of the HTML structure: https://i.stack.imgur.com/zdFWS.jpg Below is the code I have used, but unfortunately, it's not yielding any results. ...

javahtmlcsswebjsoup

Switch input-lg to input-sm in Bootstrap3 for smaller screens

One of my challenges is incorporating Twitter Bootstrap’s input-lg class on all input fields. I am wondering if there is a way, possibly utilizing JavaScript, to seamlessly switch to Twitter Bootstrap's input-sm class on smaller screens. This would ...

twitter-bootstrapcssmedia-queries

Guide to match the size of <td> with an <img>

I am currently attempting to align several images in my HTML using the <table> element. My goal is to eliminate any white space between the images. You can view my progress so far in this JSFiddle example: JSFiddle example. However, I am still encoun ...

htmlcsshtml-table

Unexpected problem with redrawing HTML application in Android WebView

I created a basic nixie clock app using HTML and wrapped it in a WebView for use on Android. It consists of one HTML file, a JS file, a CSS file, and ten digit images. After a few hours, I noticed stripes appearing in the center of the screen where the an ...

androidhtmlcsswebviewdrawable

What is the best way to position an image in the center for mobile screens?

Struggling to center an image for mobile devices, I have successfully done so for tablets and regular desktop devices. However, I am facing challenges in editing the code to ensure full responsiveness for mobile devices. Additionally, there is excess white ...

htmlcssmobile

What is the most effective method for generating dial images through programming?

Currently, I am in the process of creating a website that makes use of variously sized and styled dials to indicate progress. The filled portion of the dial represents how close an item is to being 100% complete. I am seeking a universal solution that wil ...

javascripthtmlcsssvgraphael

What is the best way to adjust the height of the second column downwards?

I am trying to achieve a 2-column layout with both columns at the same height. This is how it currently appears: And this is how I want it to be: Here is my code snippet: html { background-color: lightblue; font-family: Tahoma, Geneva, sans-serif ...

htmlcss

Troubleshooting: CSS3 transform issue unresolved

I'm attempting to add a 10-degree rotation to my menu items. While this CSS effect works in Firefox, I can't seem to get it to work in Chrome and Safari. I already know that IE doesn't support this particular CSS3 property, so that's no ...

htmlcss

Tips for ensuring that the click event function properly for numerous elements sharing the same class

I'm currently working on adding a flip effect to multiple tiles whenever a user clicks on them as part of building a dashboard-style webpage. I am having trouble making the click event work for all tiles with the same class name. Even though all the ...

javascripthtmlcss

Modify a CSS style with JavaScript or jQuery

Can CSS rules be overwritten using jQuery or JavaScript? Imagine a table with rows categorized by different classes - "names" for persons and "company" for companies. How can we efficiently hide or show specific rows based on these classes? If we have a ...

javascriptjquerycss

Creating a masonry layout with uniform row heights

I am trying to achieve a masonry style layout for these cards in Bootstrap. The current setup has columns with the same height, but I want them to have fluid height and consistent margin spacing like the blue line shown below. I attempted to use .card-colu ...

csstwitter-bootstrap

Is it possible to display two menus on opposite sides of the screen while using Google Maps?

Currently, I am working on developing a Progressive Web App using Vue.js and Vuetify.js. My goal is to have two buttons overlaid on Google Maps - one on the left side of the screen to open a navigation drawer, and another on the right side to display user ...

cssgoogle-mapsvue.jsvuetify.js

Drupal 6 encountering an inline AJAX error

Is there a way to add custom inline error messages to a form in Node, including CCK and other elements? I have looked at multiple modules, but none of them seem to offer a complete solution as they lack CCK support, upload support, error messages, etc. ...

cssajaxdrupalinline-formset

What is the method to convert Javascript values from pixels to percentages?

Is it possible to change the scrolltop value dynamically based on a percentage of the user's screen size? I've been trying to achieve this using JS but haven't had any luck. Here is a link to a codepen that showcases the issue: [link] (http ...

javascriptjqueryhtmlcsswordpress

I'm attempting to render HTML emails in ReactJS

I have been attempting to display an HTML page in React JS, but I am not achieving the same appearance. Here is the code snippet I used in React JS: <div dangerouslySetInnerHTML={{ __html: data }}/> When executed in regular HTML, the page looks lik ...

javascripthtmlcssreactjs