How to create an Android app using bootstrap

Do you know, How to build an android app using bootstrap? The traditional Android apps are built with an 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 teaching you how to create an app but also how to generate and download .apk ( 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 the browser is very easy. modern browsers provide the facility that how your app will look 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 an 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 be 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 looks like below.

download app - android app using bootstrap

Now you are ready to install your app on your mobile. Just click on the android icon. your app will download 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

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes0
No4
Powered by Pixelbart

Leave a Reply

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