CODEWITHSUNDEEP
htmlcssbootstrap-4
dutchkillsg
dutchkillsg

Reputation: 373

My row takes up too much height

Im building a mock website and my css is quite rusty. My row in my container is taking up a lot of height. In my second row I want its position just below that row but it ends up on the end of the page. How can I fix this?

html {
  width: 100%;
  height: 100%;
}

.container-fluid {
  overflow: hidden;
}

.desk {
  width: 100vw;
  height: 70vh;
}

.book {
  flex-direction: flex-start;
  position: absolute;
  width: 10vw;
  height: 10vh;
}

.logo {
  position: absolute;
  top: 10vh;
  font-family: 'Roboto', sans-serif;
}

.search {
  padding-left: 75vw;
  bottom: 65vh;
}

.popular {
  margin: 0 auto;
  bottom: 30px;
}
<body>
  <div class="container-fluid">
    <div class="row">
      <img src="./images/desk.png" class="desk">
      <div class="col book">
        <img src="./images/book.png" class="book">
        <h1 class="logo">Etomon</h1>
      </div>
      <div class="col search">
        <input type="text" class="" placeholder="Search?">
        <button type="submit">Submit</button>
        <form>
          subject/course <br>
          <input type="text" placeholder="Graphic Design"> <br> level <br>
          <input type="text" placeholder="Intermediate"> <br> starting <br>
          <input type="text" placeholder="mm/dd/yyyy"> <br> ending <br>
          <input type="text" placeholder="mm/dd/yyy"> <br>
          <button type="submit">Submit</button>
        </form>
      </div>
    </div>
    <div class="row">
      <h1 class="popular">Most Popular Subjects</h1>
    </div>

This is what I am trying to recreate second half of page

Is there a way to control the height within bootstrap or am I doing something wrong with how my html and css are laid out?

Upvotes: 1

Views: 1193

Answers (1)

WebDevBooster
WebDevBooster

Reputation: 14954

Bootstrap rows are designed to work in conjunction with columns. So, if you put an item into a Bootstrap row but not into a col inside that row or if you don't have a col inside that row at all, that will inevitably mess things up.

Oh, and everything you are trying to do, can be done with native Bootstrap classes alone. Without the use of any custom css.

Here's a snippet that should guide you in the right direction using a jumbotron in this case because I thought it was the most fitting: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    #hero {
        background: url("https://picsum.photos/1280/710") no-repeat center;
        background-size: cover;
    }
</style>


<div class="jumbotron jumbotron-fluid" id="hero">
    <div class="container">
<!--
        <h1 class="display-4">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
-->
        <div class="row">
            <div class="col-12 col-md-7 mb-4 book">
                <img src="https://picsum.photos/180/120" class="book">
                <h1 class="logo h2 text-light" style="margin-top: -50px;">Etomon</h1>
            </div>
            <div class="col search">
                <input type="text" class="" placeholder="Search?">
                <button type="submit">Submit</button>
                <form>
                    subject/course <br>
                    <input type="text" placeholder="Graphic Design"> <br> level <br>
                    <input type="text" placeholder="Intermediate"> <br> starting <br>
                    <input type="text" placeholder="mm/dd/yyyy"> <br> ending <br>
                    <input type="text" placeholder="mm/dd/yyy"> <br>
                    <button type="submit">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col">
            <h1 class="popular text-center">Most Popular Subjects</h1>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions