CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Patrick Thorpe
Patrick Thorpe

Reputation: 370

How do I get a Bootstrap container to stay inline with another div?

Currently, the top of my web page looks like this:

Share buttons beneath logo

I'm trying to use Bootstrap instead of CSS as I was told it was simpler (however so far I'm struggling to bend it to my will just as much as CSS). I have a div containing the logo and title, and a Bootstrap container with a list group of buttons to share the website. I want the buttons to appear on the right hand side of the page inline with the logo.

HTML:

<div class="headerDiv" style="display: inline">
        <div>
            <img id="logo" src="{% static "images/logo.jpg" %}" alt="Fact or Fiction Logo" />
        </div>
        <div class="titleDiv">
            <h1 id="title">FACTorFICTION</h1>
        </div>
    </div>
    <div class="container" style="display: inline">
        <div class="row">

            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="list-group list-group-horizontal">
                    <script>
                        function fbs_click() {
                            u = location.href;
                            t = document.title;
                            window.open
                            ('http://www.facebook.com/sharer.php?u=' +
                            encodeURIComponent(u) + '&t=' + encodeURIComponent(t),
                            'sharer', 'toolbar=0,status=0,width=626,height=436');

                            return false;
                        }
                    </script>
                    <a class="list-group-item" href="http://www.facebook.com/share.php?u=http://www.example.com/" onclick="return fbs_click()" target="_blank">
                    <img src="{% static "images/facebook.jpg" %}" alt="Share to Facebook.">
                    </a>

                    <a class="list-group-item" href="https://twitter.com/home?status=http://www.example.com/" onclick="window.open('https://twitter.com/home?status=Fact Or Fiction http://www.example.com/; return false;">
                    <img src="{% static "images/twitter.jpg" %}" alt="Share to Twitter.">
                    </a>

                    <a class="list-group-item" href="https://plus.google.com/share?url=http://www.example.com/" onclick="window.open('https://plus.google.com/share?url=http://www.example.com/',null,'height=626,width=436,status=yes,toolbar=no,menubar=no,location=no'); return false;" target="_blank">
                    <img src="{% static "images/googleplus.jpg" %}" alt="Share to Google Plus.">
                    </a>

                    <a class="list-group-item" href="http://www.reddit.com/submit" onclick="window.open('http://www.reddit.com/submit?url=http://www.example.com/',null,'height=900,width=750,status=yes,toolbar=no,menubar=no,location=no'); return false;">
                    <img src="{% static "images/reddit.jpg" %}" alt="Share to Reddit.">
                    </a>
                </div>
            </div>
        </div>
    </div>

CSS:

.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item {
    margin-bottom: 0;
    margin-left:-4px;
    margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
    border-top-right-radius:0;
    border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
    border-top-right-radius:4px;
    border-bottom-left-radius:0;
}

.headerDiv {
    float: left;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.headerDiv div {
    display:table-cell;
}

.titleDiv {
    position: relative;
    top: 30px;
    width:100%;
}

I have tried putting the two divs inside another, however for some reason this causes my buttons to be vertical, and still beneath the logo.

I'm open to all suggestions, including telling me that I'm going about this completely wrong. Thanks in advance.

Upvotes: 0

Views: 4754

Answers (1)

hcheung
hcheung

Reputation: 4034

Bootstrap is easy as long as you understand the fundamental concept and basic structure. It general has a structure of a container with rows and within each row, you could have several cols. With that in mind, it is as easy as this:

<div class="container">
   <div class="row">
      <div class="headerDiv col-xs-4">
        <img src="https://placehold.it/200x50">
        <h1 id="title">Company Name</h1>
      </div>

      <div class="list-group list-group-horizontal col-xs-8">
        <a href="#"><img src="https://placehold.it/80x20"></a>
        <a href="#"><img src="https://placehold.it/80x20"></a>
        <a href="#"><img src="https://placehold.it/80x20"></a>
        <a href="#"><img src="https://placehold.it/80x20"></a>
      </div>
   </div>
</div>

With minimum styling as:

.headerDiv {
  display:inline;
  float:left;
}
h1#title {
  display:inline;
}
.list-group {
  float: right;
}

You can style the rest of margins and alignment of text as you need.

Upvotes: 2

Related Questions