Search code examples
htmlcsstwitter-bootstrapinlinebootstrap-5

Unable to inline elements in bootstrap

I want some elements to be in one line, here's my html code:

h2 {
  color: Red;
  font-size: 30px;
  font-weight: bold;
  display: inline-block;
}

img {
  display: inline-block;
}

h2.class1 {
  color: green;
  font-size: 20px;
  display: inline-block;
}

h2.class2 {
  color: yellow;
  font-size: 14px;
  display: inline-block;
}

.bg {
  background-color: black;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">

</html>

<!-- Code -->
<div class="bg">
  <div class="container-sm center" style="margin-top: 25px;">
    <div class="d-grid gap-2 col-6 mx-auto">
      <img src="https://via.placeholder.com/50" width="50px" height="50px" style="border-radius:25px;">
      <h2 style="font-size: 25px;">Some Heading Text</h2>
      <h2 class="class1">{}></h2>
      <h2 class="class2"> Some Tagline Like Text</h2>
      <hr>
    </div>
  </div>
</div>

Here's what is the resulting output: output.

Also, Here's how i want it to look like (this is after removing bootstrap): expected output

Edit: Things I tried:-

  • d-inline-block
  • inline-block
  • float property
  • experimenting with margins
  • Some Bootstrap Classes(sorry i forgot which)
  • Code Blocks I got from stackoverflow
Solution

  • Try out the code below I have made some big changes with your markup as well as Css

    <!DOCTYPE html>
<html>
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      h2 {
        color: Red;
        font-size: 30px;
        font-weight: bold;
        
      }

     
      h2.class1 {
        color: green;
        font-size: 20px;
        
      }

      h2.class2 {
        color: yellow;
        font-size: 14px;
        
      }

      .bg {
        background-color: black;
      }
    </style>
  </head>

  <body>
    <div class="d-flex flex-row justify-content-start bg-dark">
      <img
        src="https://via.placeholder.com/50"
        width="50px"
        height="50px"
        style="border-radius: 25px"
      />
      <div class="d-flex align-items-baseline my-4">
        <h2 style="font-size: 25px">Some Heading Text</h2>
        <h2 class="class1">{}></h2>
        <h2 class="class2">Some Tagline Like Text</h2>
      </div>
    </div>
  
  </body>
</html>