Twitter Bootstrap Question posted in

How to do a sign-up and log-in page like those of instagram with html and twitter-bootstrap-Twitter bootstrap

I am trying to make a sign-up and log-in page like those of Instagram. I encounter difficulties in horizontal and centre alignment of the element and espacially to put the small horizontal bar. I have already spent a day on it, I need help please.

Here is my HTML and CSS code :

<body>
        <div id="bloc_page">
           <div id="formulaire">
             <div id="titre">
                Gestion TP-TD
             </div>
              <form>
                <div class="form-group">
                    <input  class="form-control" placeholder="Numéro de téléphone, @email ou nom utilisateur" type="text">
                </div>
                <div class="form-group">
                    <input class="form-control" placeholder="Mot de passe" type="password">
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-lg btn-block">Sign In</button>
                </div>
              </form>
          </div>
        </div>

        <div id="bloc_page">
            <div id="lien"> Vous n'avez pas de compte? <a href="#">S'inscrire</a> </div>
        </div>

    </body>

#bloc_page {

    background-color: #f5f5f5;
    border: 1px solid black;
    width: 37%;
    margin: auto;
    margin-top: 50px;
    padding: 3%;
    padding-bottom: 5px;    
}

#titre {
    vertical-align: middle;
    font-style: italic;
    font-weight: bold;
    font-size: 2.0em;
}

#lien {
    padding-bottom: 2px;
    height: 20px;
}

And i get this :
enter image description here

here is for instagram :
enter image description here

Tags:

3

Answers


  1. 0

    use bootstrap grid system

    <div class="col-md-6 offset-md-3">
</div>
    Login or Signup to reply.
  2. 0

    CSS solution:

    For #titre & #lien, to align them vertically, you can try using the line-height property.

    To align #lien horizontally, wrap the content in a <p> tag and set the text-align: center; property.

    —

    For the horizontal lines you can use the <hr> tag.

    hr {
    display: inline-block;
    width: 50px;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
    vertical-align: middle;
}

p {
    display: inline-block;
}
    <hr/>
<p>OR</p>
<hr/>

    I’d recommend looking into the bootstrap grid system either way though.

    Login or Signup to reply.
  3. 0 
        hr{
       border: 1px solid #dcdcdc;
       }

    .between_horizontal_lines{
      text-align: center;
      margin:0; 
      font-size: 11px;
      }

    .or{
        padding-top:10px;
        }

    If you are using Bootstrap 3

     <div class="row">
     <div class="col-xs-5">
         <hr> 
     </div>

     <div class="col-xs-2 or">
        <p class="between_horizontal_lines">OR</p>
     </div> 

     <div class="col-xs-5">
         <hr>
     </div>
 </div>

    Bootstrap 4

     <div class="row">
     <div class="col-sm-5">
         <hr> 
     </div>

     <div class="col-sm-2 or">
        <p class="between_horizontal_lines">OR</p>
     </div> 

     <div class="col-sm-5">
         <hr>
     </div>
 </div>

    I tested on both and found that 4 didn’t recognize the xs class

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search