How can I get my header elements to line up in a row properly?

user_18206341 0
Viewed 55

I've designated a background image for the whole page. On top of this I would like to have a header, with a solid background color, with my logo on the left side, business name in the middle, and my name on the right side.

Below this I would like 3 columns for the main page of my site, each probably with their own background color if that's possible.

I'm trying to use bootstrap to give my header three sections (logo-text-name), and I'd like the text to be centred.

The reason I have so much padding is because the logo kept hanging out the bottom of the header.

Now I'm sure there's a lot I'm doing wrong, but if anyone could help I'd be eternally grateful. Thanks.

body {
  background-image: url(images/bg.jpg);
}

header {
  background-color: #539e8a;
  padding: 20px 10px 30px 10px;
  color: #f6c5be;
  border-radius: 25px;
  margin-top: 10px;
  height: 180px;
}

#logo {
  width: 160px;
  height: 140px;
  float: left;
}
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <header>
    <div class="container">
      <div class="row">
        <div class="col-xs-2">
          <img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo">
        </div>

        <div class="col-xs-8">
          <h1>Cakes 'n' Bakes</h1>
        </div>

        <div class="col-xs-2">
          <p>my name</p>
        </div>
      </div>
    </div>
  </header>

  <div class="container">
    <div id="main" class="row">
      <div id="col1" class="col-sm-4">
        <h2> col 1 </h2>
      </div>
      <div id="col2" class="col-sm-4">
        <h2> col 2 </h2>
      </div>
      <div id="col3" class="col-sm-4">
        <h2> col 3 </h2>
      </div>
    </div>
  </div>
</body>

twitter-bootstrap css html php
2 Answers

Bootstrap 5 really brings flexbox to the table, so I'd use that rather than wrestling with columns, which can be troublesome due to inflexibility.

Here I've replaced your container, row, and columns with a simple flex row. Item alignment on the cross axis centers things up. The center element has Bootstrap's flex-fill class on it to make it stretch.

Also notice that I've replaced your custom margin and padding with Bootstrap spacing classes to clean things up.

body {
  background-image: url(https://via.placeholder.com/1200);
}

header {
  background-color: #539e8a;
  color: #f6c5be;
  border-radius: 25px;
}

#logo {
  width: 160px;
  height: 140px;
}
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <header class="mt-3">
    <div class="d-flex align-items-center">
      <img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo" class="logo m-3">

      <div class="flex-fill text-center">
        <h1>Cakes 'n' Bakes</h1>
      </div>

      <div class="px-3">
        <p>My Name</p>
      </div>
    </div>
  </header>

  <div class="container">
    <div id="main" class="row">
      <div id="col1" class="col-sm-4">
        <h2> col 1 </h2>
      </div>
      <div id="col2" class="col-sm-4">
        <h2> col 2 </h2>
      </div>
      <div id="col3" class="col-sm-4">
        <h2> col 3 </h2>
      </div>
    </div>
  </div>
</body>

user_12648040

I make some changes and add somethings to your code so I hope I hope I could help you!

body {
  background-image: url(images/bg.jpg);
}

header {
  background-color: #539e8a;
  padding: 20px 10px 0px 0px;
  color: #f6c5be;
  border-radius: 25px;
  margin-top: 10px;
  height: 180px;
}

#logo {
  width: 160px;
  height: 140px;
}

#top-part-1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.col-xs-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.col-xs-8 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-2 {
  padding: 20px 10px 0px 0px;
  color: #000000;
  border-radius: 25px;
  margin-top: 10px;
  height: 180px;
}

#top-part-2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<header>
  <div class="container" id="top-part-1">
    <div class="col-xs-2">
      <img id="logo" src="images/logo.png" alt="cakes 'n' bakes logo">
    </div>

    <div class="col-xs-8">
      <h1>Cakes 'n' Bakes</h1>
    </div>

    <div class="col-xs-2">
      <p>my name</p>
    </div>
  </div>
</header>

<div class="header-2">
  <div class="container" id="top-part-2">
    <div class="col-xs-2">
      <h2> col 1 </h2>
    </div>
    <div class="col-xs-8">
      <h2> col 2 </h2>
    </div>
    <div class="col-xs-2">
      <h2> col 3 </h2>
    </div>
  </div>
</div>

user_181913730
Related