Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS grid style change

Posted on 2016-11-21
2
Medium Priority
?
63 Views
Last Modified: 2016-11-21
              <div class="container container3">

        <div class="inner" id="login">
        <form action="">
            <label><span class="glyphicon glyphicon-user"></span></label>
            <input type="text" placeholder='Username' class="input"/><br>
            <label><span class="glyphicon glyphicon-envelope"></span></label>
            <input type="text" placeholder='Email' class="input"/><br>
            <label><span class="glyphicon glyphicon-lock"></span></label>
            <input type="password" placeholder="Password" class="input" /><br>
            
            
            <label><span class="glyphicon glyphicon-check"></span></label>
            <input type="password" placeholder="Confirm Password" class="input"/><br>
            <button type="submit" class="button">Sign in</button>
        </form>
        
    </div>    
</div>
.container3{background: #cccccc; width: 100%;border: solid 1px white;}

Open in new window


I have the code above how can I put put
get it to be
name
email
password                   confirm password
(and email and name to be the full like not just center)?
And make the boarder a bit smaller.
0
Comment
Question by:Jasmine Ikhreishi
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 59

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41895895
Here is an option - I took the liberty of using input-groups to combine your glyphicons with the inputs.
  <div class="row">
    <form action="" class="col-xs-6 col-xs-offset-3">
      <label class="sr-only" for=""username">Username</label>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
          <input type="text" placeholder="Username" id="username" class="form-control"/>
        </div>
      </div>
      <div class="form-group">
        <label class="sr-only" for="email">Email</label>
        <div class="input-group">
          <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
          <input type="text" placeholder="Email" id="email" class="form-control"/>
        </div>
      </div>
      <div class="row form-group">
        <div class="col-xs-6">
          <label class="sr-only" for="password">Password</label>
          <div class="input-group">
            <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
            <input type="text" placeholder="Password" id="password" class="form-control"/>
          </div>
        </div>
        <div class="col-xs-6">
          <label class="sr-only" for="email">Confirm Password</label>
          <div class="input-group">
            <div class="input-group-addon"><span class="glyphicon glyphicon-check"></span></div>
            <input type="text" placeholder="Confirm Password" id="confirm" class="form-control"/>
          </div>
        </div>
      </div>
      <div class="form-group">
        <button type="submit" class="button">Sign in</button>
      </div>
    </form>
  </div>

Open in new window

Working sample here
0
 
LVL 1

Author Comment

by:Jasmine Ikhreishi
ID: 41895904
Yes but I want it to show up transparent like this:
Css code:
.container3{background: #cccccc; width: 100%;border: solid 1px white;}
.col-md-4 h1{ color : #9f00a7; font-family: calibri, arial; font-weight: bold; font-size: 30px; position: relative; left: 30px;} 
.header{ width : 100%; padding-top: 20px;height:100%}
.header a{color: rgb(100,100,100); padding: 20px; position: relative; top : 30px;font-family: calibri, arial;font-weight: 900;  }
#col-md-4{ height: 50px;}
.control-label{float: left;}
.container .inner{background: transparent;width: 480px; margin: 100px auto; border : 1px solid none; padding: 10px; }
.inner h1{color : rgb(200,200,200); font-family: calibri, arial; font-weight: bold; text-align: center; font-size: 40px}
.inner h3{color: rgb(200,200,200); font-size: 18px; font-family: calibri; text-align: center; margin-top: -5px}
.inner form label span{color: white;}
.inner form lagend{color: white;}
.inner .input{width : 90%; border: none; border-bottom: 1px solid white; color: white; background: transparent; padding: 10px;}
.inner .input:focus{box-shadow: none; border: none;}
.container hr{border-color: rgb(100,100,100);}
.inner .button{border-radius:10px 10px 10px 10px;color: white; background: #cccccc; padding: 2px 30px ;  border: 2px solid white;  font-family: calibri; margin:10px auto; font-weight: bold;}
.inner .button:hover{background: #cccccc; color:red ;border: 2px solid red;}

Open in new window

html code:
 
            <div class="col-md-12">
                    <div class="heading-title-wrapper" style="color">
                        <h2 class="title" <?php echo $css_title_color ?>><?php echo "Sign-up Here!" ?></h2>
                        <span class="line-title" style="background-color:#fff"></span>
                    </div>
                </div>
     
              <div class="container container3">

        <div class="inner" id="login">
        <form action="">

            <input type="text" placeholder='Username' class="input" style="width:600px" /><br>

            <input type="text" placeholder='Email' class="input" style="width:600px" /><br>
<div class= "col-md-4 col-md-offset-4">
            <input type="password" placeholder="Password" class="input" />
</div>
<div class="col-md-4">
            <input type="password" placeholder="Confirm Password" class="input" /><br>
            </div>
            <button type="submit" class="button">Sign in</button>
        </form>
        
    </div>

Open in new window


Sorry I didnt know how to put it on a snippet.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question