Twitter Bootstrap Question posted in

Hero banner text alignment issue with Bootstrap-Twitter bootstrap

enter image description here

I have a similar design like the one attached here and having to build this using Bootstrap 4.x. I’m struggling with the hero banner as it spans across the full width of the page and the blue box has text that aligns with the logo. I’ve used ‘container’ class to wrap the logo and links. Since the blue box starts from the left of the window and spans across almost half the width of the window I’m unable to use the same container class. My question is how do I align the text in the blue box with the logo as shown in the attached picture please?
Any suggestions/help much appreciated.

.logo{ font-size: 50px;}
ul{ display: flex; margin-bottom: 0;}
li{ list-style: none; margin-right: 20px}
.hero-left{background-color: #158df2;}
h1{color: white;}
.hero-right{ height: 600px; width: 60%; background: url('https://images.unsplash.com/photo-1608754786700-002ea0379062?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2769&q=80')}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper">
  <header class="container d-flex justify-content-between align-items-center">
    <div class="logo">
      Logo
    </div>   
    <nav>
      <ul class="d-flex">
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
  </header>
  <div class="hero d-flex">
    <div class="hero-left">
      <div class="container">
        <h1>Some text goes here lorem ipsum dolor...</h1>
      </div>
    </div>
    <div class="hero-right"></div>
  </div>
</div>
Tags:

2

Answers


  1. 0 
      

h1{
font-size:35px ! important;}

    .text{
    margin-left:45px;
   margin-right:40px;}
.logo{ font-size: 50px;}
ul{ display: flex; margin-bottom: 0;}
li{ list-style: none; margin-right: 20px}
.hero-left{background-color: #158df2;}
h1{color: white;}
.hero-right{ height: 600px; width: 60%; background: url('https://images.unsplash.com/photo-1608754786700-002ea0379062?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2769&q=80')}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper">
  <header class="container d-flex justify-content-between align-items-center">
    <div class="logo">
      logo
    </div>   
    <nav>
      <ul class="d-flex">
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
  </header>
  <div class="hero d-flex">
    <div class="hero-left">
      <div class="container">
<div class="text">

        <h1>Some text goes here lorem ipsum dolor...</h1>
</div>
      </div>
    </div>
    <div class="hero-right"></div>
  </div>
</div>

    I just created a new div inside and set its margin to align with your logo. Your Font size in snippet is too large and what you tried to achieve in that it is small there is !important in font size its kind of not good make sure your style sheet is after bootstrap and bootstrap will not overwrite your styles

    Login or Signup to reply.
  2. 0

    Please find below code as per your required styling of header and banners.

    .logo {
  font-size: 50px;
}

ul {
  display: flex;
  margin-bottom: 0;
}

li {
  list-style: none;
  margin-right: 20px
}

.hero-left {
  width: 50vw;
  background-color: #158df2;
  height: 600px;
}

h1 {
  color: black;
  max-width: 50%;
}

.hero-right {
  height: 600px;
  width: 50vw;
  background: url('https://images.unsplash.com/photo-1608754786700-002ea0379062?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2769&q=80')
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="wrapper">
  <header class="container d-flex justify-content-between align-items-center">
    <div class="logo">
      Logo
    </div>
    <nav>
      <ul class="d-flex">
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
  </header>
  <div class="d-flex" style="position: relative">
    <div class="container">
      <h1>Some text goes here lorem ipsum dolor...</h1>
    </div>
    <div class="d-flex" style="position: absolute; z-index: -1">
      <div class="hero-left">
      </div>
      <div class="hero-right"></div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search