CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
FeelsBadMan
FeelsBadMan

Reputation: 49

Positioning for elements using bootstrap

How to position elements more accurate using bootstrap? Example: now i have a div with class .bg there is content inside that div which is positioned via bootstrap, BUT when I am using offset class to position elements like I want It looks good only on desktop/tablets, but if we talk about mobile design - it doesn't look good at all, so my main question is how to center my elements inside that div with class .bg on mobile phones? some code that may help you:

.bg {
  background-color: rgba(15, 26, 47, 0.9);
  max-width: 920px;
  max-height: 420px;
  margin: 100px auto;
  z-index: 36;
  position: relative;
} // main div

.goodsright,
.goodsleft {
font-size: 16px;
letter-spacing: 0.02em;
line-height: 1.25;
text-align: left;
margin-top: 40px;
z-index:36;
} // content inside it
//bootstrap classes for elements inside .bg class
<div class="col-sm-4 col-sm-offset-1 col-xs-offset-4  goodsleft">
<div class="col-sm-4 col-sm-offset-2 col-xs-offset-4 goodsright">

Upvotes: 1

Views: 821

Answers (1)

jstoobz
jstoobz

Reputation: 384

So I looked at your code a little bit. Try implementing this to get your desired view on mobile:

HTML:

<div class="container">
    <div class="bg">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 goodsleft">
            <h1>Content Title 1</h1>
            <p>
                Content 1 information here.
            </p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 goodsright">
            <h1>Content Title 2</h1>
            <p>
                Content 2 information here.
            </p>
        </div>
    </div>
</div>

CSS: 

.bg {
    background-color: rgba(15, 26, 47, 0.9);
    width: 100%;
    z-index: 36;
}

.goodsright, .goodsleft {
    background-color: rgba(15, 26, 47, 0.9);
    padding: 40px;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-align: left;
    margin-top: 40px;
    z-index:36;
}

If you're trying to use an offset for col-xs then make sure you set the next viewport above it offset to 0, it requires a reset, an example of that is below:

<div class="container">
    <div class="bg">
        <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-0 col-md-6 col-lg-6 goodsleft">
            <h1>Content Title 1</h1>
            <p>
                Content 1 information here.
            </p>
        </div>
        <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-0 col-md-6 col-lg-6 goodsright">
            <h1>Content Title 2</h1>
            <p>
                Content 2 information here.
            </p>
        </div>
    </div>
</div>

Hope this helps!

Upvotes: 1

Related Questions