1 Replies - 266 Views - Last Post: 16 July 2014 - 07:11 AM

#1 Now2407  Icon User is offline

  • New D.I.C Head

Reputation: -2
  • View blog
  • Posts: 43
  • Joined: 18-April 14

help with bootstrap grid

Posted 13 July 2014 - 10:44 PM

hello,
i'm creating a website where people can click social icons. im using twitter bootstrap. i'm trying to position the social icons at the top but i don't know how to fix it?? could some one help?

Posted Image

heres my code

the html code:
<!doctype html>

<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
    <link rel="stylesheet" type="text/css" href="home.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
    
    <div class="row">
        
        <div class="container">
            <ul class="center">
    
                <li >home</li>
                <li>trending</li>
                <li>news</li>
                <li>music</li>
                <li>gaming</li>
                <li>tech</li>
            </ul>
            <div class="menu">
            <ul class="pull-right">
            <li><img src="images/fbook.png" height="30px"  width="30px"/></li>
            <li><img src="images/gplus.png"height="30px"  width="30px" /></li>
            <li><img src="images/twit.png" height="30px"  width="30px"/></li>
            <li><img src="images/instagram.png" height="30px"  width="30px"/></li>
        </ul>
            </div>
        </div>
        </div>
        
    </div>
        
    
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>



and the css:

.center{
    text-align: center;
     list-style: none;
    
}
.center li{
    display: inline-block;
}
.pull-right{
    list-style: none;
    margin: 0px;
    padding: 0px;
   
    
}
.pull-right li{
   display: inline-block;

margin: 5px 5px 5px 5px;


   

   
}
.row{

    background-color: gray;
    
}


Is This A Good Question/Topic? 0
  • +

Replies To: help with bootstrap grid

#2 fatihmert  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 48
  • Joined: 04-March 12

Re: help with bootstrap grid

Posted 16 July 2014 - 07:11 AM

So, You weren't do just .container item.
You must create grid, You can examine its official document, here is link

Before, you will define grid system after apply pull-right/pull-left classes.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1