1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Help with bootstrap .

Discussion in 'General Scripting Chat' started by Setox, Sep 23, 2015.

  1. Setox

    Setox Power Member

    Joined:
    Apr 30, 2015
    Messages:
    581
    Likes Received:
    243
    Occupation:
    CPA Hunting
    Location:
    MALTA MAYBE ..
    I need some help with bootstrap , i still learning , i got confused between using solo bootstrap & css responsive , i'm working on a small page with a header(title) then an responsive image , then two buttons on the same line : yes or no but however it took from me 10 hours researching & execute but nothing work ; i'm using mobiletest.me to review site on device , but when things become good on the desktop i found that the site destroyed on others ; how i can fix this &let things automaticly show up based on the size of device . someone help me please .

    11052462_1707594322793407_7819683004794524201_n.jpg 11951331_1707594332793406_7553837268448014313_n.jpg 12037939_1707598316126341_171087163661768703_n.jpg

    here is the source code :

    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <style>
        body {
        background: #3366cc;
        background-image:url(images/beagle.png);
        background-repeat: no-repeat;
        background-position: top;
        
        
        }
        h1{
        text-align:center;
        }
        
        </style>
        </head>
        
        <body>
        <div class="container">
        <h1>Do you Know Something about your beagle ?</h1>
        <a href="#" class="btn btn-success btn-lg">YES</a>
        <a href="#" class="btn btn-default btn-lg">NO</a>
        </div>
        
        </body>
        </html>
     
  2. MrBlue

    MrBlue Senior Member

    Joined:
    Dec 18, 2009
    Messages:
    974
    Likes Received:
    680
    Occupation:
    Web/Bot Developer
    Try this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <style>
        body {
            background: #3366cc;
        /*    background-image:url(images/beagle.png);
            background-repeat: no-repeat;
            background-position: top;*/    
        }
        h1{
            text-align:center;
        }
        .row-centered {
            text-align:center;
        }
        .col-centered {
            display:inline-block;
            float:none;
            /* inline-block space fix */
            margin-right:-4px;
        }
        .img-responsive{
              display:inline-block;
              padding-bottom: 10px;
        }
        </style>
        </head>
        
        <body>
    
    
        <div class="container">
            <div class="row row-centered">
                <div class="col-xs-12 col-centered">
                    <h1>Do you Know Something about your beagle ?</h1>
                </div>
                <div class="col-xs-12 col-centered">
                    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=450%C3%97450&w=450&h=450" class="img-responsive">
                </div>
                <div class="col-xs-12 col-centered">
                    <a href="#" class="btn btn-success btn-lg">YES</a>
                    <a href="#" class="btn btn-default btn-lg">NO</a>
                </div>
            </div>
        </div>
    
    
        </body>
        </html>
    
    
     
    • Thanks Thanks x 1
  3. Setox

    Setox Power Member

    Joined:
    Apr 30, 2015
    Messages:
    581
    Likes Received:
    243
    Occupation:
    CPA Hunting
    Location:
    MALTA MAYBE ..
    Thank you so much bro , i didn't reply because i found the solution to use the grid system , however i had problem with buttons so i've used to make them as block , but when i logged in today , ooh thank you this is how i wanted the page ! thank you so much , i wish i have seen this before .