I am trying to get each individual box to slide up with content on hover but am unable to figure out how to the hover part to increase in height. So if the box was 350px x 350px and you hovered over it, it would increase in height to 650px x 350px to allow for a heading, text and a button. I have tried to increase the height based on :hover but tha obv didn't work.
Should I be using flex for this?
Can I accomplish this with CSS?
Can I use transition height on hover?
Does anyone have any suggestions as I am stumped.
Here is my code:
#import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
* {
box-sizing: border-box;
}
body {
font-family: Montserrat, sans-serif;
margin: 0;
padding: 3rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 17rem);
gap: 2rem;
}
.item {
position: relative;
height: 19rem;
background-color: lightGrey;
overflow-y: hidden;
box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.1);
}
.item h3 {
margin: 0;
display: block;
background-color: turquoise;
padding: 1rem;
}
.item a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.item a:hover ~ .item__overlay, .item a:focus ~ .item__overlay {
transform: translate3d(0, 0, 0);
}
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.item__overlay {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
position: absolute;
width: 100%;
top: 0;
transition: transform 300ms;
background-color: #82ebe0;
transform: translate3d(0, calc(100% - 3.5rem), 0);
}
.item__body {
flex-grow: 1;
padding: 1rem;
}
.item__body p {
margin: 0;
}
<div class="grid">
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person1" aria-hidden="true">Person 1</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person2" aria-hidden="true">Person 2</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person3" aria-hidden="true">Person 3</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person4" aria-hidden="true">Person 4</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
Make the height based on the content and the image position:absolute
#import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
* {
box-sizing: border-box;
}
body {
font-family: Montserrat, sans-serif;
margin: 0;
padding: 3rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 17rem);
grid-auto-rows:1fr; /* remove this if you don't want equal rows*/
gap: 2rem;
}
.item {
position: relative;
background-color: lightGrey;
overflow-y: hidden;
box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.1);
}
.item h3 {
margin: 0;
display: block;
background-color: turquoise;
padding: 1rem;
}
.item a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.item a:hover ~ .item__overlay, .item a:focus ~ .item__overlay {
transform: translate3d(0, 0, 0);
}
img {
position:absolute;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.item__overlay {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
transition: transform 300ms;
background-color: #82ebe0;
transform: translate3d(0, calc(100% - 3.5rem), 0);
}
.item__body {
flex-grow: 1;
padding: 1rem;
}
.item__body p {
margin: 0;
}
<div class="grid">
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person1" aria-hidden="true">Person 1</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person2" aria-hidden="true">Person 2</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person3" aria-hidden="true">Person 3</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person4" aria-hidden="true">Person 4</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
Related
Here's what I want to achieve both for desktop and mobile:
And here's how far I've gotten with it
.container {
background-image: url("https://houniqueconstruction.com/wp-content/uploads/2023/02/peng-chen-WFgSotZQECo-unsplash-copy-1024x803.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height:700px;
}
.flexbox {
display:flex;
justify-content:center;
align-items: center;
min-height: 700px;
}
.text-box {
max-width:350px;
background:#f6f6f6;
padding: 30px 20px;
}
<div class="container">
<div class="flexbox">
<div class="text-box">
<h1>Complete Remodeling</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.</p>
<a>CONTACT US</a>
</div>
</div>
</div>
I tried to achieve a layout with the CSS property background-image, however I lack the knowledge to achieve what I was expecting
For desktop we use margin-left on the container and offset the .text-box in the opposite direction.
For mobile we need to add an absolutely-positioned semi-transparent background element inside .text-box.
body {
background-color: #f6f6f6;
}
.container {
background-image: url("https://houniqueconstruction.com/wp-content/uploads/2023/02/peng-chen-WFgSotZQECo-unsplash-copy-1024x803.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height:700px;
}
.container.desktop {
margin-left: 175px;
}
.flexbox {
display:flex;
align-items: center;
min-height: 700px;
}
.container.mobile .flexbox {
justify-content: center;
}
.text-box {
position: relative;
max-width:350px;
padding: 30px 20px;
}
.container.desktop .text-box {
left: -175px;
}
.text-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #f6f6f6;
}
.container.mobile .text-background {
opacity: 0.5;
}
.text-content {
position: relative;
z-index: 1;
}
<div class="container desktop">
<div class="flexbox">
<div class="text-box">
<div class="text-background"></div>
<div class="text-content">
<h1>Complete Remodeling</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.</p>
<a>CONTACT US</a>
</div>
</div>
</div>
</div>
<div class="container mobile">
<div class="flexbox">
<div class="text-box">
<div class="text-background"></div>
<div class="text-content">
<h1>Complete Remodeling</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.</p>
<a>CONTACT US</a>
</div>
</div>
</div>
</div>
I am using a flexbox on my site to display post previews as tiles. Each one is a fixed size (384*384px) and displays as a grid that fits as many tiles in each row as it can horizontally and it rearranges itself dynamically as the page is resized. This is the current CSS for this:
.post-list { display: flex; flex-wrap: wrap; }
.post-tile { flex: 0 0 384px; width: 384px; height: 384px; margin: 10px; padding: 30px; box-sizing: border-box; overflow: hidden; border-radius: 32px; }
I would like it to do one extra thing though if possible: If the window is narrower than the width of one of the tiles I would like it to resize the tiles down to fit in the screen while also keeping the height and width the same, but I don't know how to accomplish this.
Here is a JS Fiddle with this CSS filled out with a few basic tiles.
Currently you have it like this
flex: 0 0 384px
Change it to
flex: 0 1 384px
That second value is flex-shrink. It will solve the problem.
You are probably looking for flex-shrink: 1; which allows your item to shrink.
Note: You probably also want to play around with your padding for the .post-list element
See Example below
.post-list {
display: flex;
flex-wrap: wrap;
/*below two properties are for demonstration only*/
max-width: 200px;
border: 1px solid black;
}
.post-tile {
flex: 0 0 384px;
width: 384px;
height: 384px;
margin: 10px;
padding: 30px;
box-sizing: border-box;
overflow: hidden;
border-radius: 32px;
background-color:lightgrey;
flex-shrink: 1; /* this allows to shrink your item */
}
<ul class="post-list">
<li class="post-tile">
<h3>
Title 1
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="post-tile">
<h3>
Title 2
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="post-tile">
<h3>
Title 3
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="post-tile">
<h3>
Title 4
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="post-tile">
<h3>
Title 5
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
</ul>
I need to do the same of the snnipet, but without height in .footer
.footer {
background: blue;
width: 1200px;
height: 250px; //I NEED TO CHANGE THIS
}
.footer .container {
width: 100%;
height: 100%;
margin: 0 auto;
}
.footer .container .col-25 {
width: 25%;
float: left;
box-sizing: border-box;
height: 100%;
padding: 0 30px;
}
.footer .container .col-25 .footer-col {
color: #fff;
height: 100%;
display: inline-block;
position: relative;
}
.footer .container .col-25 .footer-col h2 {
font-size: 18px;
}
.footer .container .col-25 .footer-col input[type="button"] {
font-size: 16px;
color: #3da6cc;
background: #fff;
padding: 10px;
width: 100%;
border: none;
border-radius: 3px;
position: absolute;
bottom: 10px;
}
.footer .container .col-25 .footer-col.present .text-centered-y {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 {
font-style: italic;
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 span {
color: #29738e;
}
.footer .container .col-25 .footer-col.present .text-centered-y h3 {
font-weight: lighter;
}
<div class="footer">
<div class="container">
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
</div>
</div>
Here is the code. Even you don't need to set height. Or you can change too. Or You can extend paragraph/content
.footer {
background: blue;
width: 1200px;
}
.footer .container {
width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
}
.footer .container .col-25 {
width: 25%;
box-sizing: border-box;
padding: 0 30px;
padding-bottom: 50px;
}
.footer .container .col-25 .footer-col {
color: #fff;
height: 100%;
display: inline-block;
position: relative;
}
.footer .container .col-25 .footer-col h2 {
font-size: 18px;
}
.footer .container .col-25 .footer-col input[type="button"] {
font-size: 16px;
color: #3da6cc;
background: #fff;
padding: 10px;
width: 100%;
border: none;
border-radius: 3px;
position: absolute;
top: 100%;
}
.footer .container .col-25 .footer-col.present .text-centered-y {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 {
font-style: italic;
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 span {
color: #29738e;
}
.footer .container .col-25 .footer-col.present .text-centered-y h3 {
font-weight: lighter;
}
<div class="footer">
<div class="container">
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
</div>
</div>
I want the icon to stay at the top right. I have tried many things but nothing seems to work. It is only an issue when the text is really long or on a smaller device.
.container {
float: left;
position: relative;
width: 50%;
}
.image-right {
float: right;
position: relative;
}
<div class="container">
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
<span class="image-right">
<img style="width:13px; height:13px" src="http://findicons.com/files/icons/2354/dusseldorf/32/plus.png">
</span>
</h3>
</div>
Put the image before the text inside the h3 tag. As it says on http://www.w3schools.com/css/css_float.asp,
Elements after a floating element will flow around it.
<style>
.container{
float: left;
position: relative;
width: 50%;
}
.image-right {
float: right;
position: relative;
}
</style>
</head>
<div class="container">
<h3>
<img style="width:13px; height:13px" src="http://findicons.com/files/icons/2354/dusseldorf/32/plus.png"
class="image-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</h3>
</div>
Here is an answer. You should use position: absolute;
.container{
float: left;
position: relative;
width: 50%;
}
.container h3 {
position: relative;
}
.image-right {
float: right;
top: 0;
right: 0;
position: absolute;
}
<div class="container">
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
<span class="image-right">
<img style="width:13px; height:13px" src="http://findicons.com/files/icons/2354/dusseldorf/32/plus.png">
</span>
</h3>
</div>
I am new to bootstrap and the grid system, but as far as i am concerned the code i have build should do the following:
This is a brief example of what it should look like on desktop:
and mobile:
I intend to add padding etc, which is in a JS fiddle.
I think it may be something to do with my CSS..
My CSS:
#history-img img
{
width: 300px;
height: 400px;
float: left;
margin-left: 100px;
margin-top: 35px;
border: 2px solid #000;
}
#history
{
background-color: #0088CE;
}
#history-text
{
width: 800px;
height: 400px;
border: 2px solid #000;
background-color: #FFF;
float: right;
margin-top: 35px;
margin-right: 100px;
color: #000;
text-align: left;
padding: 30px;
}
#history-text p
{
font-size: 16px;
}
Like the comments have said don't do that with your css. The max of what you have should be CSS:
#history-img img {
border: 2px solid #000;
}
#history-text{
border: 2px solid #000;
background-color: #FFF;
color: #000;
}
#history-text p{
font-size: 16px;
}
Here's a more bootstrap specific layout:
<section class="success" id="history">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>A brief History of Doosan Babcock</h2>
</div>
</div>
<div class="row">
<div id="history-img" class="col-xs-4 col-lg-4">
<img src="img/1920/babcock_team_1920_sm.jpg" alt="babcock team 1920"/>
</div>
<div class="col-xs-6 col-sm-8 col-lg-8" id="history-text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
</div>
</div>
</div>
</section>
Bootply http://www.bootply.com/HORwI8RjP3
The col- classes assign a width for you. I made a new fiddle which should help you get started
https://jsfiddle.net/5z6ojmm1/2/
What you want is one .row inside a .container with 2 col-md-6 or col-lg-6 classes. This means that the content will be split 50/50
<div class="row">
<div class="col-md-6">
<!-- image -->
</div>
<div class="col-md-6">
<!-- text -->
</div>
</div>
Collapse on mobile
If you want to have the columns underneath each other on mobile you can specify so by using the following
<div class="row">
<div class="col-xs-12 col-md-6">
<!-- image -->
</div>
<div class="col-xs-12 col-md-6">
<!-- text -->
</div>
</div>
Note the col-xs-12 and the col-md-6, This means on XS devices it will collapse to two 12 ( 100% ) columns and on MEDIUM it will split in 2 times 6.
This is the grid system explained
http://getbootstrap.com/css/#grid-options