Bootstrap image position in jumbotron

Question

Seems like I can't get that image to be aligned with the Text.
I am trying to get that logo aligned with those two sentences.

Also, There was no style setting. Just the default Bootstrap.css file.

<div class="box-padding-md grey-bg">
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <img src="../img/bg.png" style="float:left;width:150px;height:150px;margin-left:20px;margin-right:20px;margin-bottom:20px;">
      <h3 class="display-5">"Espher Information Assocation"</h3>
      <p class="lead">제16세대 프로젝트</p>
    </div>
  </div>
</div>

Answer 1

You can use something like this

<style>
.align{
   width:150px;
   height:150px;
   margin-left:20px;
   margin-right:20px;
   margin-bottom:20px;
}
<style>

In HTML use this

<a class="align"><img src="../img/bg.png" alt=""></a>

Answer 2

Use the grid system: https://jsfiddle.net/wwWaldi/3xy4woq7/13/

<div class="box-padding-md grey-bg">
  <div class="jumbotron jumbotron-fluid">
      <div class="row">
        <div class="col-1"></div>
        <div class="col-4 text-right">
           <img src="../img/bg.png" id="myImg" >
        </div>
        <div class="col-6">
          <h3 class="display-5">"Espher Information Assocation"</h3>
          <p class="lead">제16세대 프로젝트</p>    
        </div> 
        <div class="col-1"></div>
    </div>
  </div>
</div>

Answer 3

You can do that with bootstrap media object, no need to use any css for that. Check that link you can have a better idea https://getbootstrap.com/docs/4.0/layout/media-object/

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Bootstrap Media</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div class="box-padding-md grey-bg"> <div class="jumbotron jumbotron-fluid"> <div class="container"> <div class="media p-3"> <img src="https://i.imgur.com/v9f1nS2.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h3 class="display-5">"Espher Information Assocation"</h3> <p class="lead">제16세대 프로젝트</p> </div> </div> </div> </div> </div> </body> </html>

Bootstrap image position in jumbotron

Question

3 answers

solution1
0 2019-06-21 04:01:27

solution2
0 2019-06-21 04:02:53

solution3
0 ACCPTED 2019-06-21 04:38:38

Bootstrap image position in jumbotron

Question

3 answers

solution1 0 2019-06-21 04:01:27

solution2 0 2019-06-21 04:02:53

solution3 0 ACCPTED 2019-06-21 04:38:38

solution1
0 2019-06-21 04:01:27

solution2
0 2019-06-21 04:02:53

solution3
0 ACCPTED 2019-06-21 04:38:38