Latest ads

Electronics
Vehicles
Property
Search

bootstrap help

lilman

lilman

Well-known member
  • May 10, 2009
    40,041
    52,955
    113
    Colombo
    me mada content eka page eke center karanne kohomada ?



    HTML: 
         <body class="text-center">
    <form class="form-signin text-center ">
      <img class="mb-4" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
      <label for="inputEmail" class="sr-only"></label>
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
      <label for="inputPassword" class="sr-only"></label>
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
      <div class="checkbox mb-3">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      <p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>
    </form>
  </body>
     
    • Like
    Reactions: kinkon
    KandyMalli

    KandyMalli

    Well-known member
  • Feb 15, 2018
    4,256
    3,891
    113
    <body class="text-center"> --> <body class="container">


    full code eka dapan, help ekak dennam
     
    lilman

    lilman

    Well-known member
  • May 10, 2009
    40,041
    52,955
    113
    Colombo
    KandyMalli said:
    <body class="text-center"> --> <body class="container">


    full code eka dapan, help ekak dennam
    Click to expand...
    HTML: 
    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">

    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>

    <title>Login</title>

    <!-- Custom styles for this template -->
    <link href="../css/signin.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" rel="stylesheet">

  </head>

  <body>
    <!-- header bar -->
    <nav class="navbar navbar-expand-sm bg-primary navbar-dark fixed-top">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Add New Job</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">View Jobs</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </nav>

      
     <body class="text-center">
    <form class= "form-signin text-center" action="logincheck.php" method="get" name="login" >
      <img class="mb-4" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
      <label for="inputEmail" class="sr-only"></label>
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
      <label for="inputPassword" class="sr-only"></label>
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
      <div class="checkbox mb-3">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      <p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>
    </form>
  </body>

    

       <br>
      <!-- footer bar -->
      <div class="container my-5">
      <footer class="bg-light text-center text-light fixed-bottom">
      <div class="text-center p-3" style="background-color: rgb(103, 144, 233)">
        © 2020 Copyright:
        <a class="text-light" href="#">sample</a>
      </div>
      <!-- Copyright -->
    </footer>
    </div>

  </body>
</html>
     
    KandyMalli

    KandyMalli

    Well-known member
  • Feb 15, 2018
    4,256
    3,891
    113
    FALL3N said:
    Click to expand...

    me thiyenne 🙂 meka balapan mcn
    lilman said:
    HTML: 
    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">

    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>

    <title>Login</title>

    <!-- Custom styles for this template -->
    <link href="../css/signin.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" rel="stylesheet">

  </head>

  <body>
    <!-- header bar -->
    <nav class="navbar navbar-expand-sm bg-primary navbar-dark fixed-top">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Add New Job</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">View Jobs</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </nav>

     
     <body class="text-center">
    <form class= "form-signin text-center" action="logincheck.php" method="get" name="login" >
      <img class="mb-4" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
      <label for="inputEmail" class="sr-only"></label>
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
      <label for="inputPassword" class="sr-only"></label>
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
      <div class="checkbox mb-3">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      <p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>
    </form>
  </body>

   

       <br>
      <!-- footer bar -->
      <div class="container my-5">
      <footer class="bg-light text-center text-light fixed-bottom">
      <div class="text-center p-3" style="background-color: rgb(103, 144, 233)">
        © 2020 Copyright:
        <a class="text-light" href="#">sample</a>
      </div>
      <!-- Copyright -->
    </footer>
    </div>

  </body>
</html>
    Click to expand...
    Ubage code eke body tag eka 2k thiyenawa. mehema kranne na normally

     
    D-ICE

    D-ICE

    Active member
  • Jul 16, 2008
    720
    233
    43
    <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="../css/bootstrap.min.css"> <script src="../js/jquery.min.js"></script> <script src="../js/popper.min.js"></script> <script src="../js/bootstrap.min.js"></script> <title>Login</title> <!-- Custom styles for this template --> <link href="../css/signin.css" rel="stylesheet"> <link href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" rel="stylesheet"> </head> <body> <!-- header bar --> <nav class="navbar navbar-expand-sm bg-primary navbar-dark fixed-top"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Add New Job</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">View Jobs</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item active"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </nav> <form class= "form-signin text-center" action="logincheck.php" method="get" name="login" > <img class="mb-4" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"> <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1> <label for="inputEmail" class="sr-only"></label> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <label for="inputPassword" class="sr-only"></label> <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> <p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p> </form> <br> <!-- footer bar --> <footer class="bg-light text-center text-light fixed-bottom"> <div class="text-center p-3" style="background-color: rgb(103, 144, 233)"> © 2020 Copyright: <a class="text-light" href="#">sample</a> </div> <!-- Copyright --> </footer> </body> </html>

    Dan balanna
     
    • Like
    Reactions: lilman
    TNHM

    TNHM

    Well-known member
  • Jan 3, 2017
    5,328
    15,488
    113
    HTML: 
    <div class="container">
  <div class="row">
    <div class="col-12 d-flex justify-content-center align-items-center">
      <form>
          
      </form>
    </div>
  </div>
</div>


    d-flex
    justify-content-center
    align-items-center

    මේ class වලින් center කරන්න පුළුවන්. Vertically center වෙන්න නම් parent element එකට height එකක් තියෙන්න ඕනේ.
     
    Lakshan-Seram

    Lakshan-Seram

    Well-known member
  • May 31, 2011
    24,714
    12,619
    113
    127.0.0.1:8080/Kandy
    TNHM said:
    HTML: 
    <div class="container">
  <div class="row">
    <div class="col-12 d-flex justify-content-center align-items-center">
      <form>
         
      </form>
    </div>
  </div>
</div>


    d-flex
    justify-content-center
    align-items-center

    මේ class වලින් center කරන්න පුළුවන්. Vertically center වෙන්න නම් parent element එකට height එකක් තියෙන්න ඕනේ.
    Click to expand...
    Sign in form eke margin 0 auto tiyenne.

    muge body eka full width na ekai scene eka.
    Grid structure eka werdi
     

    Similar threads

    Psiko
    POS Buisness Help
    Replies
    9
    Views
    360
    Any.key
    Any.key
    AnuradhaRa
    මේ javascript එක කොපි කලාට වැඩ නෑනෙ
    Replies
    8
    Views
    705
    Lakshan-Seram
    Lakshan-Seram
    thriloka
    • Question
    Questions Laravel වැඩ්ඩොන්ගෙන් පොඩි උදව්වක් ඕනා.
    Replies
    9
    Views
    487
    Kasun0
    K
    lilman
    PHP help ekak one
    Replies
    7
    Views
    791
    NRTG
    NRTG
    D
    Sampath | WebxPay Payment gateway වෙබ් සයිට් එකකට දාපු අය ඉන්නවද?
    Replies
    5
    Views
    717
    slx
    slx
    Top Bottom