How to create a quick and beautiful Landing Page using Bootstrap 4

in #utopian-io7 years ago (edited)

# What Will I Learn?

  • You will learn about bootstrap
  • You will learn how to use bootstrap (HTML & CSS) to design a web page
  • You will learn how to layout a form in bootstrap
  • You will learn how to use bootstrap for offline development

Requirements

  • You must have basic HTML knowledge
  • You must have basic CSS Knowledge
  • You need Text Editor, browser and internet to download resources

Difficulty

  • Basic

Tutorial Contents

Bootstrap is the most popular framework used in developing websites with HTML, CSS, and JavaScript. It’s a framework used by web designers and developers to quickly layout the frontend of their websites or web applications.

STEPS

image.png

Click the download button to download bootstrap files.

Download the compressed production jQuery.

  • Move the downloaded bootstrap and jQuery to your development folder and unzip it. You should have something like this. Then, copy and paste your jQuery-3.3.1.min.js into the JS folder for better organization and simplicity. I renamed mine to “jQuery.min.js”.
    image.png
  • Open your text editor and create a new file named “index.html” and save it in the root folder. It should look like this.
  • Create another CSS file named “custom.css” and save it in the CSS folder.
    image.png
  • Open the “index.html” file in your text editor and declare your standard HTML opening elements as seen below.
    image.png

The two files linked at line 11 and 12 is the bootstrap CSS framework and a custom CSS file for our custom styling. You must add/link the bootstrap file on line 12 for the framework to work.

  • Next, is to add/link the JavaScript files. The files should be at the bottom of the page before the tag to enable fast loading of the page. You must add the JQuery file first before the bootstrap JS if not it would not work.
    image.png
  • Add the following piece of code to your index.html file. The code should be placed within the Body tag of the page.
    image.png

The piece of code starts from the

tag. It creates a collapsible navbar with a dark color that it’s mobile-friendly. The bootstrap tags work like magic and ease your work because it comes with automatic styling. Visit https://getbootstrap.com/docs/4.0/getting-started/introduction/ for a well-documented explanation on how to use the framework.

  • Add the following code immediately after the navbar for the main body of the web page. The piece of codes will layout a bootstrap form inside a container. It’s a registration form, yours can be anything.
    image.png

The codes above starting from

will produce a registration from within a container inside the main body of the page.
image.png

  • Open your “custom.css” file and add the following piece of code.
    image.png

The custom styling is to center the content of web page and add colors. You can experiment with the colors you want.
Final Result
Preview in your browser to see the result we have.
image.png

The final landing page will look like this. You can change the colors, the form inputs among other things and make it yours.

The full source code of the index.html file is:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
   <title>Utopian-io Landing Page with Bootstrap</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/custom.css" rel="stylesheet">
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Utopian-io</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">                  
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="index.html" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Projects</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Tutorials</a>
              <a class="dropdown-item" href="#">Blog post</a>
              <a class="dropdown-item" href="#">Development</a>
              <a class="dropdown-item" href="#">Copy Writing</a>
            </div>
          </li>
        </ul>                    
        <a class="btn btn-success my-2 my-sm-0" href="#"> + Contribution</a>                   
      </div>
    </div>
    </nav>
    <main role="main" class="container">
    <h1>Registration Form</h1>
    <p class="lead">Register and contribute to open source</p>
    <div class="container registration-form">    
        <form>
         <div class="form-row">
            <div class="form-group col-md-4">
              <label for="inputCity">First Name</label>
              <input type="text" class="form-control" id="inputFname" placeholder="First Name">
            </div>
            <div class="form-group col-md-4">
              <label for="inputCity">Last Name</label>
              <input type="text" class="form-control" id="inputLname" placeholder="Last Name">
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-4">
              <label for="inputEmail4">Email</label>
              <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
            </div>
            <div class="form-group col-md-4">
              <label for="inputPassword4">Password</label>
              <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
            </div>
          </div>
          <div class="form-row">             
            <div class="form-group col-md-8">
              <label for="inputState">How did you hear about us?</label>
              <select id="inputState" class="form-control">
                <option selected>Choose...</option>
                <option>...</option>
              </select>
            </div>          
          </div> 
          <div class="row">
          <div class="col-md-12"> 
             <button type="submit" class="btn btn-success col-md-8">Create account</button>
          </div>
        </div>
        </form>
    </div>
    </main>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
  </html>

The full source code of the custom.csss file is:

body {
  padding-top: 5rem;
}
.registration-form {
  padding: 3rem 1.5rem;
  background-color: #3E4551;   
}
.form-group label {
    color: #fff;
}

Curriculum
This is my first contribution on utopian-io platform. I will do more with time.



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Thank you! I'll do so immediately.

Hey @aliyu-s I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • This is your first accepted contribution here in Utopian. Welcome!

Suggestions

  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

  • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Hey. Please can you enlighten me on this utopian-io?

It’s a platform that allow steemians to contribute to open source projects. Visit https://utopian.io for more info.