0

I was reading this thread on this subject. However, due to this being my first day of creating a site only focusing on bootstrap I'm still learning the basics so I do apologise in advance for any errors.

I was trying to centre all my content one after the other. However, my image doesn't look centred. How can I make it centred and aligned with the header and three boxes?

My full code is below. 

.body {
  margin: 0;
  padding: 0;
}

.header-title {
  text-align: center;
  color: black;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
}

.intro-text {
  text-align: center;
  color: black;
  font-family: 'Roboto', sans-serif;
}

.p {
  text-align: center;
  color: black;
  font-family: 'Roboto', sans-serif;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 250px;
  width: 250px;
  border-radius: 25px;
  background: #4D5061;
}
<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>

<div class="container">
  <div class="header-title">
    <h1>ABOUT ME</h1>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="span4"><img class="center-block" src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" /></div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div class="well">
          <h3>Column 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="well">
          <h3>Column 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="well">
          <h3>Column 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
      </div>
    </div>
  </div>
Community
  • 1
  • 1

2 Answers2

0

only change your class on line #58 from 'container' to 'row', the class 'container' add padding on left and right.

Line #58

    <div class="container">

change to:

    <div class="row">
Jorge Omar Sanchez
  • 114
  • 5
0

Your container should contain all your webpage,issue one. Secondly, you have adjusted the core css for the image block which is affecting the image.

Also bootstrap is made on a 12 grid system. Make use of this when desiging your webpage.

Here is the wireframe design which should do what you want. You will need to change the content to suit but the layout is what I think you are after.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h3 class="text-center">
                h3. Lorem ipsum dolor sit amet.
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="col-md-5">
        </div>
        <div class="col-md-2">
            <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" />
        </div>
        <div class="col-md-5">
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <p>
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
        </div>
        <div class="col-md-4">
            <p>
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
        </div>
        <div class="col-md-4">
            <p>
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
        </div>
    </div>
</div>
Jake S
  • 122
  • 14