bootstrap giving extra width on left hand side

Question

I am creating my first site using bootstrap, and as its a joomla site its version 2.3

I am having some problems getting going here is the code so far:

<body>
<div class="container">
<div class="row logobar">
<div class="span12">
<div class="logoholder">
<img src="templates/<?php echo $this->template ?>/images/open-plan-design-logo.jpg" alt="Open Plan Design Logo " />
</div>
</div>
<!-- row --></div>....

and the css

body {
    background:#231f21;
    background-color:#DCDBDB;
    color:#fff;
}

.container {
    background-color:yellow;
}

.logoholder{
    width:499px;
    margin:0 auto;
}


.logobar {
    margin-bottom:20px;
    background-color:green;
}

At reduced screen widths everything looks fine - the image is centered, and reduces in size

However, at full width the image is not exactly centered, and there is an odd bit of green (from .logobar) sticking out at the left. If I take out the .row then the green disappears but of course nothing is resonsive

I guess I am doing something wrong...

you can see what I mean here www.opd.ee-web.co.uk

score 2 · Accepted Answer · edited May 23 '17 at 12:21

2

You need to change your row to row-fluid which will remove this negative margin.

<div class="row-fluid logobar">

Documentation [1].
More info [1].

edited May 23 '17 at 12:21

Community

1
1

answered Jan 27 '14 at 12:24

Xareyo

1,357
1
13
25

score 1 · Answer 2 · answered Jan 27 '14 at 12:26

1

The elements with .row have a negative margin applied to ensure and contained .span elements are correctly aligned.

You can remove this negative margin with some custom css, but that is likely to cause more problems.

The ideal solution is to simple move the logobar to the span level.

<div class="span12 logobar">

answered Jan 27 '14 at 12:26

Kami

19,134
4
51
63

@maxelcat please note that with your current approach on low resolutions (< 500px wide) the `container` will become smaller than the image. – Kami Jan 27 '14 at 13:31

score 0 · Answer 3 · answered Jan 27 '14 at 12:20

0

Add following code in your custom css file

body .row{
    margin-left:0 !important;
}

answered Jan 27 '14 at 12:20

Muhammad Usman

10,426
22
72
107

bootstrap giving extra width on left hand side

3 Answers3