Bootstrap- Page layout Issue in using Bootstrap columns

328
June 15, 2017, at 08:12 AM

I use Bootstrap columns for styling my page. I have 4 main div in my row and I expect them to display in a row but they aren't and also a scroll-bar are inserted in the bottom of the page. what is the problem? My codes and JsFiddle are following

HTML:

<div id="pre-footer" class="row">
        <div class="col-md-9">
            <div class="adv-clickable col-md-3 col-sm-6 col-xs-10 col-xs-offset-1">
                <a href="#"><p>fdhgf</p></a>
                <a href="#"><p>fdgdfg</p></a>
                <a href="#"><p>fgdfg</p></a>
                <a href="#"><p>fgdfg fgdfg</p></a>
                <a href="#"><p>fgdfg gfddg</p></a>
                <a href="#"><p>dgdfgfd</p></a>
                <a href="#"><p>fgdfgdf fgdff gdfgdfg dgdfg</p></a>
            </div>
            <div class="adv-clickable col-md-3 col-sm-6 col-xs-10 col-xs-offset-1">
                <a href="#"><p>fdhgf</p></a>
                <a href="#"><p>fdgdfg</p></a>
                <a href="#"><p>fgdfg</p></a>
                <a href="#"><p>fgdfg fgdfg</p></a>
                <a href="#"><p>fgdfg gfddg</p></a>
                <a href="#"><p>dgdfgfd</p></a>
                <a href="#"><p>fgdfgdf fgdff gdfgdfg dgdfg</p></a>
            </div>
            <div id="pre-footer-nested1" class="col-md-3 col-sm-6 col-xs-10 col-xs-offset-1">
                <img src="images/pre-footer-logo.png">
                <div id="socials" class="col-xs-9 center-block">
                    <a href="#"><i class="fa fa-3x fa-facebook-square"></i></a>
                    <a href="#"><i class="fa fa-3x fa-twitter-square"></i></a>
                    <a href="#"><i class="fa fa-3x fa-linkedin-square"></i></a>
                    <a href="#"><i class="fa fa-3x fa-instagram"></i></a>
                    <a href="#"><i class="fa fa-3x fa-telegram"></i></a>
                </div>
                <form action="#" class="form-group col-xs-9 center-block">
                    <label for="email" class="text-center">ghdfgfdghfghfghfg</label>
                    <input type="email" id="email" class="form-control" placeholder="fdgdfgfdhggfh" >
                    <input type="submit" value="dfghfdghgfhg" class="btn btn-block btn-success">
                </form>
            </div>
            <div id="pre-footer-nested2" class="col-md-3 col-sm-6 col-xs-10 col-xs-offset-1">
                <img src="images/nemad.jpg" >
                <div class="col-md-12">
                    <div class="footer-logos">
                    </div>
                    <div class="footer-logos">
                    </div>
                    <div class="footer-logos">
                    </div>
                    <div class="footer-logos">
                    </div>
                </div>
            </div>
        </div>
    </div>

Css:

#pre-footer{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 50px;
    position: relative;
}
.adv-clickable{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}
.adv-clickable a:first-child p{
    margin-bottom: 30px;
}
.adv-clickable p{
    color: #606060;
    font-size: 12px;
    font-weight: bold;
}
.adv-clickable a{
    text-decoration: none;
}
#pre-footer-nested1{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#pre-footer-nested1 img{
    width: 40px;
    height: 40px;
    margin: 0 auto;
}
#pre-footer-nested2{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#socials{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#socials i{
    color: #01a89e;
}
#pre-footer-nested1 form{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}
#pre-footer-nested1 form label{
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 10px;
}
#pre-footer-nested1 input:last-child{
    margin-top: 10px;
    background-color: #01a89e;
    font-size: 12px;
}
#pre-footer-nested1 input:last-child:active{
    background-color: #0f8079;
}
#pre-footer-nested2{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}
#pre-footer-nested2 img{
    width: 100px;
    height: 120px;
}
#pre-footer-nested2 div{
    display: flex;
    margin-top: 22px;
    justify-content: center;
    flex-wrap: wrap;
}

Here is my JsFiddle

Thanks in advance.

Rent Charter Buses Company
READ ALSO
How can i center this second nav bar in marerializecss?

How can i center this second nav bar in marerializecss?

i have a navigation bar i made using MaterializeCSS and i was wondering how to center the bottom oneHere is my code:

270
Character jump script javascript platform game

Character jump script javascript platform game

Probably my third or fourth post on this subject, thanks for the help so far

396
Image on image overlay on hover with Javascript

Image on image overlay on hover with Javascript

I have a php sql query that will generate a lot of images, and I need a code that will overlay a semi transparent image on top of the original image on hover

452
(HTML) How do i create a form that redirects to webpages dependant on answer?

(HTML) How do i create a form that redirects to webpages dependant on answer?

I apologize if this question has been asked before, i can't figure out an easy way to put thisI am trying to creating a form on my website that redirects to "easter egg" pages dependent on the word entered on the form, and redirects to a "wrong" page when entering...

55