I am completely new to bootstrap, have been working with it for like a week. I am currently working on a Christmas gift to my girlfriend and I am really stuck.
I want to place a picture and a short text (next to each other) on a background. The image look really much like this: enter image description here It's totally left positioned and there is text next to her. (There is also a bit of a place between the image and the text and also between the text and the end of the screen in the right. The picture starts in the left where the screen starts.)
I also want everything to be responsive ofc.
I tried everything but it never really worked and I wasted like 2 days on this issue. I really can't make it alone! PLEASE HELP!!!
.section_1 {
position: relative;
color: #fff;
background-color: #bdbdbd;
}
.picture {
content: url(http://i.stack.imgur.com/Zlrxu.png);
width: 50%;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.text {
margin-bottom: 20px;
font-size: 16px;
font-weight: 300;
color: rgba(255, 255, 255, .7);
margin-bottom: 20px;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section class="section_1">
<div class="container-fluid">
<div class="row-fluid">
<div class="picture">
<div class="span2">
</div>
<div class="span10">
<div class="text">
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</section>In bootstrap 3.x ".row-fluid" class has changed to ".row" and ".span*" classes have been changed to ".col-*". I have made few changes to your code and made it to behave as given in your image link, please click here for plunker demo.
HTML file:
<section class="section_1">
<div class="container-fluid picture">
<div class="row ">
<div class="col-sm-5">
<img src="http://i.stack.imgur.com/Zlrxu.png" class="img-responsive"/>
</div>
<div class="col-sm-7 text"><p>Lorem ipsum</p></div>
</div>
</div>
CSS file:
.section_1 {
color: #fff;
background-color: #bdbdbd;}
.text {
font-size: 16px;
font-weight: 300;
color: rgba(255, 255, 255, .7);
vertical-align: middle;}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments