1

I want to increase height of my jumbotron without giving it in class because then it will be no more responsive. I wanna make this. But mine look like this

Here is my code Html:

<div class="container">
            <div class="row">
                <div class="jumbotron">
                    <div class="col-md-10">
                        <h2 class="meeting_heading">MeetingResult is dedicated to ridding the world of ineffective, under-performing and outright wasteful business meetings.</h2>
                    </div>
                    <div class="col-ms-2">
                        <button type="button" class="btn btn-default btn-lg btn-custom">Learn More</button>
                    </div>
                </div>
            </div>
        </div>

CSS:

.container 
{
    width:87%;
}
.jumbotron
{
    box-shadow: inset 0px -8px 0 rgba(0, 0, 0, 0.1);
    border-radius: 13px;
    background-color: #FAFAFA;
    min-height:300px;
}
.btn-custom
{
    width: 152px;
    background-color: #1abc9c;
    border: none;
    color:#ffffff;
    font-size: 21.994px;
    line-height: 22px;
    padding: 15px 20px 16px;
    position: relative;
    top: 13px;
    right: 4px;
}
shilovk
  • 11,718
  • 17
  • 75
  • 74

1 Answers1

0

Looks like it's working fine..

But there should be another situation in your side, that your jumbotron may be inherited from it's parent so you need to use padding there and make that rule important like this..

    .jumbotron {
        padding: 48px 60px !important;
    }

Or you can use min-height as you are using already like:

    .jumbotron {
        min-height: 300px !important;
    }

It may solve your problem...!

Rohit Sharma
  • 3,304
  • 2
  • 19
  • 34