How to use Bootstrap4 Jumbotron code-Customize Jumbotron

How to use Bootstrap4 Jumbotron code-Customize Jumbotron
    Watch the video

    click to begin

    Youtube

    Now we are about to create this bottom jumbotron part.
    In the previous part we have discussed how to create and customize our own jumbotron.
    So we won't be repeating that process now.
    Instead all we are going to do we need to type in these keywords, 'bootstrap jumbotron'
    and in the search list it is the third list item.
    So we will be right clicking it and we will be reaching into this particular part which
    is known as jumbotron.
    This is the official website of bootstrap responsive framework.
    Now from here we can see that there are two segments.
    In the first segment we can see that this is the normal or container oriented bootstrap
    jumbotron that will be taking a 1200px width.
    But we need to create a jumbotron which is something like this one, that is it will be
    occupying the whole page and it will be having a margin of 15px from both the ends.
    So instead we will be looking for a jumbotron-fluid and here it is.
    This is known as the fluid jumbotron and here goes the source code.
    So we need to copy it and in this index.html all we are going to do we are going to paste
    this thing.
    Now if we get back to our project and reload, we can see that this is the look which it
    is now presently executing.
    Now we have placed it here; now the second thing is we need to create this 15px gaping
    from both the ends; from left end and from the right end.
    We are creating another class in this jumbotron, which will be known as 'question'.
    Now all we need to do we need to get back to custom stylesheet and here we will be creating
    this 'question' class, this 'question' selector name and we will be providing a margin of,
    for say, 0 15px for the time being.
    Now let's get back to our project and we are reloading and we can see that this is the
    output.
    Now we need to create all those elements inside those we are seeing over here.
    Like this image and these text words.
    Now in this context I would like to say that instead of using this text as we have used
    a text earlier in our tutorial, so, instead of using this text element here, let's create
    some kind of interactive form that will interact with the user; we won't be talking about programming
    here, we have to design that particular form field with which, through which a user will
    be interacting with this website.
    So we will be creating here and Enter Email box, then we will be creating here a text
    area field, such the user will be providing here necessary queries.
    So we'll be creating here a form field instead of this text element.
    So all we are now going to do we are going to index.html and into this div class 'container',
    all we are now going to do we are going to create a col-sm-4 along with another class
    known as 'hello-image'.
    So we have created this Div.
    Right now what we need to do we need to close that Div.
    And in the same fashion all we are going to do we are going to create another col-sm here;
    we have created this col-sm-8.
    So what is the purpose of creating this col-sm?
    We want our contents to be displayed side-wise in case of a 768px device-width.
    And that is why we have used here col-sm.
    Now if we get back here and reload, we can see that already those two things this fluid-jumbotron
    text and this particular paragraph element both are coming side wise and if we press
    here F12, we can see that this is the first one- this col-sm-4; and this is the second
    one this col-sm-8.
    Now all we need to do we need to modify these two things; so that is why we are getting
    back to our project and instead of this h1 class, all we are now going to do we are going
    to create here an image source.
    Now this is the folder name, so we need to copy this folder name first.
    And then we will be needing that filename from here.
    This is the filename along with its extension name of .png.
    Getting back to our project and we are using it.
    So we need to provide here an alt tag with a definite image name here.
    So we are naming it as ' image11'.
    So it has been provided.
    Now all we are going to do we are going to reload and we can see that this is the image
    part over here.
    There is a particular padding from the top and from the bottom.
    So we need to rectify this.
    First of all press here F12.
    There goes the padding-top 48px and padding-bottom 48px.
    And there's another padding element here, from the top and from the bottom.
    So if we remove all those padding, we can see that this is the result.
    So we need to overcome the major problems here.
    The first one is the padding thing those we have encountered first in the jumbotron class,
    and in the second case - the size of this image.
    It is practically enormous, very big and if we look into the other way, using control
    + shift + m and back to our mobile responsiveness view, we can see that this image is practically
    Too big to fit into this device display width.
    This is an error.
    So that is what we need to rectify here.
    If we use a class known as 'img-responsive', there it goes.
    And if we get back to our project and reload we can see now that this image is at a reduced
    size; and if we press Control + shift + M again, we can see that practically this image
    is now fitting into our device display width.
    So this is one of the major things that we can overcome.
    Now if we want to modify this padding, we want to modify it as in here.
    We can see that there's practically no padding from the top or bottom.
    So if we get back to our project index.html, we have created a 'hello-image' class over
    here; and on the other hand we have used a 'question' class along with this 'jumbotron-fluid'.
    So all we can do we can get back to custom stylesheet and here we can set this padding
    thing, it is all experimental, so we are pressing here padding to 0 with this '!important' tag.
    Press control + s, get back to our project and reload.
    And now we can see that we have diminished the padding from the top and from the bottom
    of this image.
    Pressing Control + shift + m, getting back to our mobile responsive view and checking
    the image into this display, it is working well.
    There is absolutely no problem with it.
    How to install and use font awesome 5 in our template How to Make Full Width Cover Background Image in Bootstrap-Bootstrap for Beginners How to create Dropdown Menu/Navigation Bar in Html and CSS (Hindi/Urdu) How to use Font Awesome Icons in CSS-Final part How to write text on image using HTML and CSS How to make Bootstrap Jumbotron Tutorial part 1 Pagination with PHP CodeIgniter CRUD Generator Create Login Window in C# step by step top 5 best free code editor in hindi