Twitter Bootstrap Question posted in

center an image in bootstrap 4-Twitter bootstrap

I’m working on a random quote web app and I can’t center the image horizontally. Usually, this is acquired using mx-auto. My image is inside a div with size col-12, and the div is inside a row. However, image still not centering. If anyone can point out what am I missing? thanks
link http://pctechtips.org/apps/quotes/
code

<html><head>
  <meta charset="UTF-8">
 <title>Random Quotes Generator</title> 
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- fontawesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">

  <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">  
    <h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>    
  <row> 
    <div class="col-12">
      <img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid mx-auto image">
    </div> 
  </row>

  <div class="row">
    <p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
  </div>
    <div class="col-3 center">      
      <button id="getMessage" class="btn btn-primary">Get quote!</button>
  </div> 
  <br> 
  <div class="col-8 mx-auto">
    <div id="content" class="row col-12 text"></div> 
  <div id="author" class="row col-12 text"></div> 
  </div>  
  <!-- buttons -->
<div class="container">
  <div class="row">
    <div class="col-4 text-right">
      <a class="btn btn-info btn-social">
        <i class="fas fa-chevron-left"></i>
      </a>
    </div>
    <div class="col-4 text-center">       
        <a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
        <i class="fa fa-twitter"></i>
        </a>      
    </div>
    <div class="col-4 text-left">
      <a class="btn btn-info btn-social">
        <i class="fas fa-chevron-right"></i>
      </a>
    </div>
  </div>
</div>
</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body></html>

css

body {
  background-color: #354048;
}

/*.test {
  border-style: solid;
}*/

.container {
  padding-top: 50px;
}

.header_text {
    /*font-family: 'Allura';*/
    font-family: 'Cinzel', serif;
    font-size: 60px;
    font-weight: bold;

}

.text-primary {
  color: #29c0ec!important;
}

.sub_text {
   font-family: 'Cinzel', serif;
   font-size: 25px;
   font-weight: bold;
}

#getMessage {
   font-size: 18px;
}

.image {
  width: 160px;
  height: 180px;
  border-radius: 300px;
  border-color: #29c0ec;
  border-width: 3px;
  border-style: solid;

}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.text {
  color: white;
  font-family: 'Verdana';
  font-size: 20px;
}

i {
  color: white;
}

.btn {
  font-size: 35px;
  border-radius: 70px;
}
Tags:

2

Answers


  1. 0

    Add d-block class to img that make your image center. 

    body {
  background-color: #354048;
}

/*.test {
  border-style: solid;
}*/

.container {
  padding-top: 50px;
}

.header_text {
    /*font-family: 'Allura';*/
    font-family: 'Cinzel', serif;
    font-size: 60px;
    font-weight: bold;

}

.text-primary {
  color: #29c0ec!important;
}

.sub_text {
   font-family: 'Cinzel', serif;
   font-size: 25px;
   font-weight: bold;
}

#getMessage {
   font-size: 18px;
}

.image {
  width: 160px;
  height: 180px;
  border-radius: 300px;
  border-color: #29c0ec;
  border-width: 3px;
  border-style: solid;

}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.text {
  color: white;
  font-family: 'Verdana';
  font-size: 20px;
}

i {
  color: white;
}

.btn {
  font-size: 35px;
  border-radius: 70px;
}
    <html><head>
  <meta charset="UTF-8">
 <title>Random Quotes Generator</title> 
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- fontawesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">

  <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">  
    <h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>    
  <row> 
    <div class="col-12">
      <img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid mx-auto image d-block">
    </div> 
  </row>

  <div class="row">
    <p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
  </div>
    <div class="col-3 center">      
      <button id="getMessage" class="btn btn-primary">Get quote!</button>
  </div> 
  <br> 
  <div class="col-8 mx-auto">
    <div id="content" class="row col-12 text"></div> 
  <div id="author" class="row col-12 text"></div> 
  </div>  
  <!-- buttons -->
<div class="container">
  <div class="row">
    <div class="col-4 text-right">
      <a class="btn btn-info btn-social">
        <i class="fas fa-chevron-left"></i>
      </a>
    </div>
    <div class="col-4 text-center">       
        <a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
        <i class="fa fa-twitter"></i>
        </a>      
    </div>
    <div class="col-4 text-left">
      <a class="btn btn-info btn-social">
        <i class="fas fa-chevron-right"></i>
      </a>
    </div>
  </div>
</div>
</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body></html>

    or add text-center to it parent.

    body {
  background-color: #354048;
}

/*.test {
  border-style: solid;
}*/

.container {
  padding-top: 50px;
}

.header_text {
    /*font-family: 'Allura';*/
    font-family: 'Cinzel', serif;
    font-size: 60px;
    font-weight: bold;

}

.text-primary {
  color: #29c0ec!important;
}

.sub_text {
   font-family: 'Cinzel', serif;
   font-size: 25px;
   font-weight: bold;
}

#getMessage {
   font-size: 18px;
}

.image {
  width: 160px;
  height: 180px;
  border-radius: 300px;
  border-color: #29c0ec;
  border-width: 3px;
  border-style: solid;

}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.text {
  color: white;
  font-family: 'Verdana';
  font-size: 20px;
}

i {
  color: white;
}

.btn {
  font-size: 35px;
  border-radius: 70px;
}
    <html><head>
  <meta charset="UTF-8">
 <title>Random Quotes Generator</title> 
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- fontawesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">

  <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">  
    <h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>    
  <row> 
    <div class="col-12 text-center">
      <img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid image">
    </div> 
  </row>

  <div class="row">
    <p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
  </div>
    <div class="col-3 center">      
      <button id="getMessage" class="btn btn-primary">Get quote!</button>
  </div> 
  <br> 
  <div class="col-8 mx-auto">
    <div id="content" class="row col-12 text"></div> 
  <div id="author" class="row col-12 text"></div> 
  </div>  
  <!-- buttons -->
<div class="container">
  <div class="row">
    <div class="col-4 text-right">
      <a class="btn btn-info btn-social">
        <i class="fas fa-chevron-left"></i>
      </a>
    </div>
    <div class="col-4 text-center">       
        <a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
        <i class="fa fa-twitter"></i>
        </a>      
    </div>
    <div class="col-4 text-left">
      <a class="btn btn-info btn-social">
        <i class="fas fa-chevron-right"></i>
      </a>
    </div>
  </div>
</div>
</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body></html>
    Login or Signup to reply.
  2. 0

    Add classes d-flex align-items-center to the col-12 div containing the image

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

Back To Top
Search