startbootstrap-freelancer | flat design , one page | Theme library

I am new to bootstrap and I am wondering why the image is overlapping the jumbotron, I need the image to stay in the Jumbotron class only. Here is the image: Image overlapping the class Jumbotron

Here is the code:

Hi i am having trouble fixing my nav bar so that it is even and so that an item doesnt take too much space

I'm creating my first HTML website using Bootstrap, and I have been following this template: Freelancer - Start Bootstrap.

I've been able to customize the template to fit my needs for the most part. However, I have not been able to figure out how I can make it so that when I hover over a picture, you get the color overlay and the YouTube logo appears, and then when you click on the transparent overlay, the link opens.

With the template I'm using, there is an example of this, included below, but instead of a modal opening when you click on the overlay, I want an external URL to open. To do this, I thought I could just change the href to point to the external URL, but this doesn't seem to work. I can right click and open in a new window, but clicking on the overlay does nothing.

Image with overlay & logo:

I'm currently designing a website based on this bootstrap theme (https://blackrockdigital.github.io/startbootstrap-freelancer/). I like what he's done with the hr styling (see code below), but I really want to use it against a background that isn't a plain colour, i.e. a background image.

The problem with this is that when changing the star icon background-color property to transparent (i.e. not the same colour as the background), the hr line still remains beneath.

Example image . If anyone can come up with a simple way of achieving the same effect against a non-plain background, I'd be really grateful!

I'd like to add a scroll effect whereby instead of jumping instantly to the anchor down the page, when you click a link at the top it rolls smoothly down the page. Haven't had any luck yet. It's common in bootstrap websites:

bootsrap template

https://jsfiddle.net/dwzqs1vg/

I am trying to change the background color of the element (menu button) when we scroll over the corresponding section of the website just like the website below.

https://blackrockdigital.github.io/startbootstrap-freelancer/

But I am not sure how to set the condition of "when scrolling inside the particular div section".

So, I would like to trigger a function when I reach this portion of the website:

https://github.com/BlackrockDigital/startbootstrap-freelancer

When I download this template, I have ready made package.json & gulpfile.js. How can I install all devDependencies? Should I use defaul construction for every plugin:

npm i [plugin_name] [another_plugin_name] --save-dev

or another quick command?

Shoud I begin work with

gulp init

?