div positions are not being responsive css - html

Question

I am trying to implement a single page application where I want divs to display one below the other. But on resizing the viewport to various screen sizes, the positioning is getting overlapped and leaving extra spaces in between. I have codepen example to explain the problem in a better way.
https://codepen.io/SaloniDesai/pen/zPBZJr
How to make the divs appear same for every screen size ?Do i need to shuffle the way I have created the layout of the page ?
<div id="headliner" class="jumbotron text-center">
<h1>SearchGIFY app</h1>
<p>search for any GIF you want!</p>
</div>
<div id="search">
<form>
<input type="search" ng-model="vm.search.gif" value="" placeholder="type what you're looking for" />
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
<div class="row">
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}" title="{{g.title}}">
</div>
</div>
<div class="jumbotron text-center" id="trendingBar">
<h3>Trending gifs</h3>
<div class="row">
<div class="thumbnail">
<img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}" height="{{trending.images.fixed_height.height}}" title="{{trending.title}}">
</div>
</div>
</div>

Answer 1

First, your bootstrap structure isn't good, there isn't container, neither rows or col.
Try this one:
<div class="container-fluid">
<div class="row">
<div id="headliner col-md-12" class="jumbotron text-center">
<h1>SearchGIFY app</h1>
<p>search for any GIF you want!</p>
</div>
</div>
<div class="row">
<div id="search">
<div class="col-md-12">
<form class="form-inline text-center col-md-6 col-md-offset-3">
<div class="form-group">
<input class="form-control" type="search" ng-model="vm.search.gif" value=""
placeholder="type what you're looking for"/>
</div>
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}"
title="{{g.title}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center" id="trendingBar">
<h3>Trending gifs</h3>
<div class="thumbnail">
<img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}"
height="{{trending.images.fixed_height.height}}" title="{{trending.title}}">
</div>
</div>
</div>
</div>
Second, you add a lot of absolute class with % height and width. You don't have to do that if you're using bootstrap, all the responsive stuff is handled by the bootstrap grid with col classes. Take a quick look at the grid bootstrap documentation : https://getbootstrap.com/docs/3.3/css/#grid
Here's the codepen working responsively with some modification : https://codepen.io/anon/pen/MOemgw ;)