CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kriz
Kriz

Reputation: 357

How to reduce div size in CSS using twitter bootstrap?

I asked the same question before, but i made code changes from the past. I still have the same problem of adjusting the div size.

I am trying to design a login page, the screenshot is below.

http://prntscr.com/2pksiq (latest)

Where as i want the output as http://prntscr.com/2pga73 . I am trying to reduce the size of the tags

<div id="logo" class="logo col-xs-2"></div>

<div id="title" class="page-title green-bg col-xs-8">Local Adventures</div>

I am new to CSS, please suggest me a way to fix this. I am using twitter bootstrap in my project.

I have the below HTML:

<head>

    <link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/js/bootstrap.min.js"></script>
    <link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/createaccount.css" rel="stylesheet">
    <link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/styles.css"rel='stylesheet' type='text/css' href='styles.css' />
    <link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/main.css" rel="stylesheet">

    <meta charset="utf-8">

    </head>

    <title>Local-Adventures</title>

        <div class="visible-xs stop-detail">    
            <div id="login-form">
            <div class="logo col-xs-4"></div>
            <div class="page-title green-bg col-xs-8">Local Adventures</div>

            <a href="#">Create an Account</a>
            <a href="#">Sign In</a>
              <input type="email" required value="Email Address" onBlur="if(this.value=='')this.value='Email Address'" onFocus="if(this.value=='Email Address')this.value='' ">
              <input type="email" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' ">
              <input type="email" required value="Confirm password" onBlur="if(this.value=='')this.value='Confirm password'" onFocus="if(this.value=='Confirm password')this.value='' ">

        <br><br>
        <span class='btn btn-lg btn-success btn-block'>Create An Account</span>
        <span class='btn btn-lg btn-primary btn-block'>Facebook Login</span>

    </div> <!-- end login-form -->



    </div>

My CSS is below:

   @charset "utf-8";
/* CSS Document */

/* ---------- GENERAL ---------- */
/*
body {
    background: #FFFFFF;
    color: #999;
    font: 100%/1.5em sans-serif;
    margin: 0;
}
*/


a {
    color: #2a2a2a;
    text-decoration: none;
    margin:1px 33;
}

a:hover { color: #88c425; }

fieldset {
    border: none;
    margin: 0;
}
.btn-success {
 border-radius:0px;
 background-color: #88c425
}

.btn-success:hover {
background-color: #88c425
}

.btn-primary {
 border-radius:0px;
}

input {
    border: none;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    -webkit-appearance: none;
}

input:focus {
  outline: none;
}

input[type="submit"] { cursor: pointer; }

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
    content: "";
    display: table; 
}
.clearfix:after { clear: both; }

/* ---------- LOGIN-FORM ---------- */

#login-form {
    margin: 50px auto;
    width: 300px;
}

#login-form h3 {
    background-color: #79a002;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font-size: 14px;
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
}

#login-form fieldset {
    background: #fff;
    border-radius: 0 0 -1px -1px;
    padding: 0px;

}

#login-form fieldset:before {
    background-color: #fff;
    content: "";
    height: 8px;
    left: 50%;
    margin: -4px 0 0 -4px;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 8px;
}

#login-form input {
    font-size: 14px;
}

#login-form input[type="email"], #login-form input[type="password"] {
    border:none; /* clear previous borders */
    border-bottom: 1px solid #88c425; /* add bottom border */
    padding: 12px 10px;
    width: 300px;
}

#login-form input[type="email"] {
    border-radius: 3px 3px 0 0;
}

#login-form input[type="password"] {
    border-top: none;
    border-radius: 0px 0px 3px 3px;
}

#login-form input[type="submit"] {
    background: #1dabb8;
    border-radius: 3px;
    color: #fff;
    float: right;
    font-weight: bold;
    margin-top: 20px;
    padding: 12px 20px;
}

Upvotes: 2

Views: 2771

Answers (2)

Varinder
Varinder

Reputation: 2664

Fiddle: http://jsfiddle.net/Varinder/ndcad/

Frameworks like bootstrap are generally agnostic of requirement wider than basic web app or control elements etc

In your case, specific header stylings etc would be a bit of a pain in the neck to acomplish via a framwork.

It's always a good idea to rely on frameworks as little as possible.

Following will put you in right direction:

HTML

<div class="login-form-header">
   <div class="logo">
      <img src="http://placehold.it/50x50" />
   </div>
   <h2 class="page-title green-bg">Local Adventures</h2>
</div>

Shying away from using grid classes as they wont fit in here.

CSS

.login-form-header {
    overflow:hidden; /* clearfix */    
    background:#88C425;
}

.logo {
    float:left;
}

.page-title {
    margin:0;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:white;
    line-height:50px; /* height of the logo image to center text verticaly */
    margin-left:60px;
}

Upvotes: 1

nick
nick

Reputation: 1246

You can use a developer tool to see what is effecting each element. For example in Firefox if you right click on any thing on the page and press inspect element, it will show you what css attributes are applied to it, what tags they are under and even what css document they are in and the line they are on! from there you can go into your css and change it or even change things on the live page itself in the inspect element panel to give yourself a preview of what you want to do. Another good tool you should learn to use is firebug, try downloading it and practice using it.

Upvotes: 1

Related Questions