Logo image & Heading on the same line

Last Updated On Monday 1st Nov 2021

HTML Logo in Header

Html Image in Header.

  • Put both elements in a container DIV.
	<div class="header">
  <img src="img/logo.png" alt="logo" />
  <h1>My website name</h1>
</div>
	

Image in Header HTML

	.header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}
	

Header with logo

Use BootStrap

	<div class="row">
    <div class="col-md-4">
        <img src="img/logo.png" alt="logo" />
    </div>
    <div class="col-md-8">
        <h1>My website name</h1>
    </div>
</div>