CODEWITHSUNDEEP
css
Charlie Fisher
Charlie Fisher

Reputation: 57

Need text to be aligned inside bootstrap

Here is my code I want everything inside the div class="col-md-6 col-md-offset-3"> To be completely centered for some reason when I'm trying the Bootstrap text-center class it's not centering properly.

Here is my index.html code. Also I'm using Bootstrap and a Google Font.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="bootstrap/js/jquery-2.2.3.min.js" type="text/javascript"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div class="bg1">
      <div class="container">
        <div class="row">
        <div class="col-md-6">
          <img class="lgsize" src="logo.gif" alt="Logo">
        </div>
        <div class="col-md-6">


        </div>
      </div>
        <div class="row">
          <div class="pushdown">
          <div class="col-md-6 col-md-offset-3">
          <span class="text-center title">Proto X Media</span>
          <p class="text-center subtext">Professional Media Production & Hardware Consultation.</p>
        </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

And also here is my style.css file I have made.

.title {
  font-family: 'Bree Serif', serif;
  font-weight: 800;
  font-size: 500%;
  color: 373d44#;
  text-align: center;
}
.bg1 {
  background-image: url("bg2.jpg");
  background-size: cover;
}
.lgsize {
  width: 150px;
  height: 140px;
}
.pushdown {
  padding-top: 150px;
  padding-bottom: 250px;
}
.menu {
  font-size: 100%
  font-family: 'Bree Serif', serif;
}
a {
  color:inherit;
  text-decoration: none;
}
a:hover {
  background-color: transparent;
  text-decoration: none;
}
.subtext {
  text-align: center;
  font-family: 'Bree Serif', serif;
  font-size: 16px;
}

Thank you guys very much :) !

Upvotes: 1

Views: 41

Answers (1)

damo_inc
damo_inc

Reputation: 653

Elements to be aligned must have 

display: block /*(or inline-block)*/

Also, put 

text-align:center

on the parent div and remove from children.

Upvotes: 1

Related Questions