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: https://i.sstatic.net/DYf8m.jpg

<!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

Generate individual CSS files using postcss and rollup

When I import each css file in my JavaScript, I want it to generate a new css file for the build. For example: import "./app.css"; import "./admin.css"; This would result in creating dist/app.css and dist/admin.css. My configuration fi ...

cssbuildrollupjspostcss

Stylish Titles with Bootstrap

I have been trying to eliminate the border that is creating the panels Body, but I am encountering some difficulties in locating it. Here is the code snippet for my panel: <div class="panel"> <div class="panel-heading"> <span class ...

htmlcsstwitter-bootstrap

Google Extension PHP Plugin

Is it feasible to integrate a PHP file into a Google Extension for Chrome? I've been exploring the idea of creating an extension and most resources only mention HTML, CSS, and JavaScript. Any guidance on using PHP in the extension would be highly valu ...

phpjavascripthtmlcssgoogle-chrome-extension

Image in the background not showing up on Chrome or Internet Explorer

The issue I'm facing is that the background-image displays correctly in Firefox, but not in Chrome or IE. Despite trying various solutions found on Stackoverflow, such as disabling my ad-blocker, placing the code in the head of the file: <head> ...

cssasp.netgoogle-chromeinternet-explorerfirefox

Utilize React's capability to pass multiple parameters to event handlers

Trying to implement React using ES6 syntax has been quite a challenge. Previously, in ES5 I used setInitialState without a constructor along with function binding to make things work seamlessly. The goal now is to update the state when an input element is ...

reactjstwitter-bootstrap-3

Is it possible to avoid widows in CSS without the need for extra HTML elements?

I have a snippet of text that is controlled within a Content Management System. The CMS restricts the use of HTML or special characters such as &nbsp; or <span>. Despite my attempts to adjust margins and padding, I cannot achieve the desired out ...

htmlcsscontent-management-systemwhitespaceword-wrap

Is there a way to disable predictive text on IOS Webview?

My hybrid app is functioning well on all devices, but I'm encountering an issue with predictive text on IOS. When users have predictive text turned on and type in an input box, the box shifts up and down to match the predictive words. Is there a way t ...

iosangularjstwitter-bootstrapwebview

Responsive Design and Advertising with CSS Media Queries

For my application, I am utilizing Twitter's bootstrap (responsive) css. My goal is to incorporate banner ads in the sidebar section. However, due to different media query settings, the sidebar's width will vary, resulting in the need for the ban ...

csstwitter-bootstrapresponsive-designadsbanner-ads

Issues with loading Angular 4 Bootstrap JS post compiling

Utilizing normal bootstrap 3 within an Angular 4 application has been working well when compiling for development using ng serve. However, upon building the application with ng build, I encounter an issue where my bootstrap.js fails to load. Below are th ...

twitter-bootstrapangularangular-cli

Run a PHP function using <button onclick=""> tag

Is it possible to trigger the execution of a PHP script when clicking an HTML button? I am aware that simply calling a PHP function directly from the button's onclick event like this: <button onclick="myPhpFunction("testString")">Button</butt ...

javascriptphphtmlcssserver

template for login page with google closure UI design

Just starting out with google closure... are there any templates provided by Google for creating a basic user registration/login page? Most of what I've found so far seems to focus on UI manipulation and DOM creation. ...

htmlcssgoogle-closuregoogle-closure-library

Verify if data is correct before refreshing user interface

When attempting to submit the HTML5 form, it stops the form submission if any required fields are missing a value or if there is another error such as type or length mismatch. The user interface then shows highlighted invalid fields and focuses on the firs ...

javascripthtmlcssvalidation

Shadow border added to each div creates a unique navigation tab for easy access

#container { position: fixed; height: 100%; left: 0px; right: 0px; top: 0px; width: 10%; background-color: blue; } #container>div {} <html> <div id="container"> <div>up</div> <div>down</div> <d ...

htmlcss

I am looking for a way to have one element as a child of another element without automatically adopting specific properties

https://i.sstatic.net/iuNB7.png <span id="priority-dot-open-menu"> <span id="priority-menu"> <span class="tooltip-top"></span> <span id="priority-dot-blue">& ...

cssbootstrap-4

Guide to building an Angular circular progress indicator using Scalable Vector Graphics (SVG)

I have designed an angular circular progress bar, but I am facing an issue with making the percentage value dynamic. I have managed to retrieve the dynamic value from an API, but I am unsure of how to implement it in creating a circular progress bar using ...

cssangularsvg

Adjust the max-height to occupy the entire available space

One of the challenges I'm facing with my web application is designing the layout in a way that all elements interact seamlessly. The structure is as follows: <body> <nav> <-- top navigation bar <ol> <-- breadc ...

htmlcssbootstrap-4

inadequately arranged in a line

In Bootstrap 4, I have created this form group that you can view in this fiddle: <div class="m-portlet__body"> <div class="form-group m-form__group row"> <label class="col-lg-2 col-form-label"> Email Address ...

cssbootstrap-4

Display the item for which the date is more recent than today's date

Is there a way to display only upcoming 'events' on my page based on their event_date? <% for (let event of events){%> <div class="card mb-3"> <div class="row"> <div class="col ...

javascriptcssmongodbmongoose

Identify compatibility with the background-attachment property set to fixed

I've been searching for an updated answer on this topic, but I couldn't find one so I wanted to confirm. My goal is to achieve a parallax effect using background-attachment: fixed, however I've noticed that it doesn't work on mobile ph ...

javascripthtmlcss

What technique works best for changing the visibility of an image without causing other elements to shift position?

On my webpage, I have a table cell with an image that should only display when hovering over the cell. The problem is that when the image is shown, it shifts the other text to the left because its default state is "display:none". I'm searching for a s ...

jquerycsshovertoggle