How to create an Android app using bootstrap


Do you know, How to build an android app using bootstrap ? The traditional android apps are build with android studio or eclipse using java programming language.
But In this tutorial I am going to teach you how to build an android app using bootstrap along with HTML and CSS .

I am not only teach you how to create an app but also how to generate and download .apk ( which is the extension of android apps ) file.

So let’s get started with creating a project folder.

project files preview - android app using bootstrap

index.html 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Bootstrap Mobile App</title>
  </head>
  <body>
    <header>
      <div class="profile-pic">
        <img src="./img/profile.jpg" alt="">
      </div>
      <div class="user-name">
        <h5>South Joovin</h5>
      </div>
    </header>
    <section class="container-fluid">
      <div class="user-about">
        <h5><b>About Me</b></h5>
        <span>May be you are worlds greatest person. but compare me with you because you are not me. I am not you!</span>
      </div>

      <div class="user-details">
        <div class="caption">
          <h5><b>More About Me</b></h5>
        </div>

        <div class="row" style="margin-top:5%;">
          <div class="col-4">
            Date of Birth
          </div>
          <div class="col-8">
            <b>20th October</b>
          </div>
        </div>

        <div class="row" style="margin-top:5%;">
          <div class="col-4">
            School
          </div>
          <div class="col-8">
            <b>Church of South Indian Mission High School</b>
          </div>
        </div>

        <div class="row" style="margin-top:5%;">
          <div class="col-4">
            College
          </div>
          <div class="col-8">
            <b>Dr. Paul raj Engineering College</b>
          </div>
        </div>

        <div class="row" style="margin-top:5%;">
          <div class="col-4">
            Working
          </div>
          <div class="col-8">
            <b>21<sup>st</sup> Century Software Solutions</b>
          </div>
        </div>

      </div>
    </section>

  </body>
</html>

style.css

header{
  height: 180px;
  width: 100%;
  background-image: url(./img/bg.jpg);
  background-size: cover;
  background-position: center;
}
.user-about{
  margin-top: 5%;
}
.profile-pic{
  width: 50px;
  margin-left: auto;
  margin-right: auto;
}
.profile-pic img{
  height: 50px;
  width: 50px;
  margin-top: 55%;
  border-radius: 100%;
}
.user-name{
  text-align: center;
  color: white;
}

.user-details{
  margin-top: 10%;
}

How to preview your app in browser?

Previewing your app in browser is very easy. modern browser’s provide the facility that how your app will looks like in various devices.

Open the index.html file in google chrome browser, then press F12,  it will toggle the inspector.

Then Type Ctrl + Shift + M, now your screen looks like below

app preview in chrome - android app using bootstrap

You can select various devices at the top of the window

list devices - android app using bootstrap

Creating APK file

Ok, now your app is completed. Compress your project folder into a .zip file.

Now go to build.phonegap.com.

phonegap welcome page - android app using bootstrap

There click on Sign In, you will redirected to Sign in page.

phonegap signin page - android app using bootstrap

If you don’t have an account already  click on Get an Adobe ID.

signup page in phonegap - android app using bootstrap

Fill all the fields and click on Sign up Button.

Now you will go to the homepage, it  may look like this.

upload zip file - android app using bootstrap

Now upload your .zip file.

uploading progress - android app using bootstrap

After finish uploading, type your app description.

type app description - android app using bootstrap

Then click on Ready to build. It will covert all your files into a .apk file. After completion of building your app your screen look like below.

download app - android app using bootstrap

Now you are ready to install your app on your mobile. Just click on android icon. your app will downloaded to your computer.

If you want to update your source code, click on Update code then hit Rebuild all.

If you like this tutorial please do share with your friends.

also read how to build a portfolio website from scratch


Leave a Reply

Your email address will not be published. Required fields are marked *