I'm using Bootstrap 4 and I'm trying to build a website for a client but I can't seem to get the grid to behave/expand as I want it to.
Here's a rough sketch of what I'm trying to achieve.
Desktop Layout Sketch:
Mobile Layout Sketch:
Here's a code snippet that I currently have that works on Desktop sizes but completly breaks down when the size goes mobile.
<div class="container">
<div class="row">
<div class="col-sm">
<h1 class="main-cap">Your Caption. Goes Here.</h1>
<div class="d-flex main-desc flex-grow-0">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus in nisl
tempor, porttitor quam eu, lacinia nibh. Etiam
interdum est magna, vel ullamcorper arcu
dignissim sit amet. Nullam commodo elementum
felis, id congue dui facilisis sit amet. </div>
</div>
<div class="col-sm hidden-xs">
<img src="assets/vectors/graphic.svg" class="img-fluid graphic-50px" alt="Engineering Graphic">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 style="padding-left: 30px;">
<button type="button" class="learn-more btn btn-outline-primary btn-block btn-lg">
Learn more
<i class="material-icons arrow-right">keyboard_arrow_right</i>
</button>
</div>
</div>
<div class="row">
<div class="socials col-xs-6"></div>
<div class="email-form col-xs-6"></div>
</div>
Any help is appreciated.
Thanks.
Your code had tags and double quotes missing... to get the effect you want, you'd have to insert (either "the image" or "the description & buttons") twice and toggle it at the appropriate breakpoint...
code snippet below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<h1 class="main-cap">Your Caption. Goes Here.</h1>
<div class="col-12 col-md-6 d-block d-sm-block d-md-none" style='border:1px solid pink'>
<img src="https://www.akberiqbal.com/Jumbo.jpg" class="img-fluid graphic-50px" alt="Engineering Graphic">
</div>
<div class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in nisl tempor, porttitor quam eu, lacinia nibh. Etiam interdum est magna, vel ullamcorper arcu dignissim sit amet. Nullam commodo elementum felis, id congue dui facilisis sit amet.
</div>
<button type="button" class="learn-more btn btn-primary ">
Learn more
<i class="material-icons arrow-right">keyboard_arrow_right</i>
</button>
</div>
<div class="col-12 col-md-6 d-none d-sm-none d-md-block" style='border:1px solid red'>
<img src="https://www.akberiqbal.com/Jumbo.jpg" class="img-fluid graphic-50px" alt="Engineering Graphic">
</div>
</div>
</div>
Related
I want to add fullPage.js to my HTML website. But my page will not be able to scroll it the whole page just stuck at the content in the header tag and is not able to scroll to other sections. I tried to change the class name of each section to "section" but it doesn't work too. Below are my codes
My codes are below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css"/>
</head>
<div id="fullPage">
<header>
<div class="iframe-container">
<div id="landingvideo" style="display:flex; align-items:center; justify-content:center;">
<iframe class="landingpage"scrolling="no" style="width:4500px; height:1000px; border:none;" marginheight="100%" marginwidth="100%" src="landingpage.html"></iframe>
</div>
</div>
</header>
<iframe class="minicarousel" src="minicarousel.php" frameborder="0" marginheight="100%" marginwidth="100%" width="100%" height="100%" scrolling="no"allowtransparency="true"></iframe>
</div>
<body>
<section class="section_position" id="section0">
<div class="container mb-5">
<div class="row">
<div class="col-lg-12 mx-auto text-center">
<p id="title">Lorem Ipsum</p>
<p id="des1">Lorem ipsum dolor sit amet</p>
<p id="des2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ligula arcu, venenatis at elit accumsan, tincidunt tempor ipsum. Maecenas risus sem, dignissim vitae velit vel, sodales pulvinar nibh. In vulputate felis et egestas ultricies. Praesent mollis erat turpis, ac faucibus orci ullamcorper nec. Aenean ac fermentum eros.</p>
</div>
</div>
<div class="carousel-wrap container mb-5">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="row">
<div class="col-md-12"> <br/>
<img src="images.png" class="img" style="width: 100%; height: 438px;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12"> <br/>
<img src="images.png" class="img" style="width: 100%; height: 438px;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12"> <br/>
<img src="images.png" class="img" style="width: 100%; height: 438px;">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 mx-auto text-center mb-5">
<img src="images.png" >
</div>
</section>
<section class="section_position mb-5" id="section1">
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto text-center">
<p id="title">Lorem Ipsum</p>
<p id="des1">Lorem ipsum dolor sit amet</p>
<p id="des2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ligula arcu, venenatis at elit accumsan, tincidunt tempor ipsum. Maecenas risus sem, dignissim vitae velit vel, sodales pulvinar nibh. In vulputate felis et egestas ultricies. Praesent mollis erat turpis, ac faucibus orci ullamcorper nec. Aenean ac fermentum eros.</p>
</div>
<div class="col-lg-4">
<center> <img class="icon1" src="images.png"> </center>
</div>
<div class="col-lg-4">
<center> <img class="icon1" src="images.png"> </center>
</div>
<div class="col-lg-4">
<center> <img class="icon1" src="images.png"> </center>
</div>
</div>
<div class="col-md-12 mx-auto text-center ">
<a href="#contactme" ><img src="images.png" ></a>
</div>
</section>
<section class="section_position mb-5" id="section2">
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto text-center">
<p id="title">Lorem Ipsum</p>
<p id="des1">Lorem ipsum dolor sit amet</p>
<p id="des2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ligula arcu, venenatis at elit accumsan, tincidunt tempor ipsum. Maecenas risus sem, dignissim vitae velit vel, sodales pulvinar nibh. In vulputate felis et egestas ultricies. Praesent mollis erat turpis, ac faucibus orci ullamcorper nec. Aenean ac fermentum eros.</p>
</div>
<div class="col-md-12">
<video id="method" poster="imagespng" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" style="width: 100%;height: auto;">
<source src="loop.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</br>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
<script>
new fullpage('#fullPage',{
autoScrolling:true
})
</script>
</body>
Your <body> is on the middle of your HTML...
You are writing HTML before the <body> tag (<div id="fullPage">) and so on.
So, short answer:
Check your HTML code. It is just not correct.
I'm using Bootstrap 4.4 to create a card column:
<!DOCTYPE html>
<html>
<head>
<title>Problems using Card-img-overlay with card-columns</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card-columns" style="padding-top: 2%;">
<div class="card">
<img class="card-img" src="https://source.unsplash.com/user/erondu/1920x1080" style="opacity: 65%;">
<div class="card-img-overlay">
<h4 class="card-title">Card Title</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card bg-danger text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card bg-primary text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-primary" href="">Leia mais</a>
</div>
</div>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="">Link 3</a>
</li>
</ul>
</div>
<div class="card-body">
<h4>Título do cartão</h4>
<h6>Subtítulo do cartão</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-danger btn-block" href="">Leia mais</a>
</div>
</div>
<div class="card bg-success text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-success" href="">Leia mais</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
The problem is with the card I use Card-img-overlay. When the screen has a higher resolution, the display occurs as expected:
When the screen is smaller:
Part of the meat and its contents are omitted. I tried padding top but it doesn't work properly.
Besides, I can't seem to make the image fit. I tried for a vertically larger image but all I can get is that the card occupies the space corresponding to the height of the image.
How do I prevent the content from being overlaid by another card? and so that the image occupies all the space of the card always?
It is because the parent div element of card-img-overlay is not set to relative and has no fixed height. Set a minimum height for the parent div element (which is .card) so that it will not shrink when the viewport gets smaller.
.card {
min-height: 300px;
position: relative;
}
https://jsfiddle.net/svwb6r31/
I think bootstrap way to impliment this idea is not the best one. Element with position: absolute is taking out of DOM and can't be fit with it's content.
I suggest to replace .card-img-overlay with .card-body and instead of <img> make div with image as it's background and parametrs as in snippet.
.bg-img {
opacity: 65%;
background: no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url(https://source.unsplash.com/user/erondu/1920x1080);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.bg-img + .card-body {
position: relative;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<title>Problems using Card-img-overlay with card-columns</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card-columns" style="padding-top: 2%;">
<div class="card">
<div class="bg-img"></div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card bg-danger text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card bg-primary text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-primary" href="">Leia mais</a>
</div>
</div>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="">Link 3</a>
</li>
</ul>
</div>
<div class="card-body">
<h4>Título do cartão</h4>
<h6>Subtítulo do cartão</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-danger btn-block" href="">Leia mais</a>
</div>
</div>
<div class="card bg-success text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-success" href="">Leia mais</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Once for all I need to learn how to place a text and button over an image using Bootstrap 3. I am trying to hit this result:
The website is: Example of the image
I am thinking the structure is something like this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="container">
<div class="row">
<img src="https://i.ibb.co/h9pxMmg/home-slider-1.jpg">
<div class="col">
<div class="home_slider_content" data-animation-in="fadeIn" data-animation-out="animate-out fadeOut">
<div class="home_slider_title">A new Online Shop experience.</div>
<div class="home_slider_subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a ultricies metus. Sed nec molestie eros. Sed viverra velit venenatis fermentum luctus.</div>
<div class="button button_light home_button">Shop Now</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Am I on the correct path regarding the structure of the HTML?
Best regards.
You could try this structure. I use for it my personal use.
.banner{position:relative}
.banner img{width:100%}
.banner .container{position: absolute; left:0; right:0; top:50%; text-align:left; transform:translateY(-50%)}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="banner"> <img src="https://i.ibb.co/h9pxMmg/home-slider-1.jpg">
<div class="container">
<div class="home_slider_content" data-animation-in="fadeIn" data-animation-out="animate-out fadeOut">
<div class="home_slider_title">A new Online Shop experience.</div>
<div class="home_slider_subtitle">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam a ultricies metus. Sed nec molestie eros. Sed viverra
velit venenatis fermentum luctus.</div>
<div class="button button_light home_button">Shop Now</div>
</div>
</div>
</div>
I am new to html and bootstrap and I need a little help. I have a photo with 100% in a div col-lg-12 and I want to put another div with a photo, in the left, and a paragraph, in the right.
The second div I want to be in the bottom of the first picture and centered. How I made the html and bootstrap the second div comes after the picture ends. I want the whole high of the sec div to be in bottom of picture not after the picture ends.
I tried with position absolute but doesn't work to be responsive. Please someone give me an idea.
HTML
<div class="container main-container">
<div class=" top">
<div class="row-fluid">
<div class="col-lg-12">
<img src="images/header.jpg" alt="#" />
<div class="row">
<div class="photo col-lg-2 col-lg-offset-2">
<img src="images/best_friends_logo.png" alt="#" />
</div>
<div class="info col-lg-8">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus velit nec sagittis mattis. Sed et tellus blandit turpis vulputate eleifend. </h1>
</div>
</div>
</div>
</div>
</div>
This might work:
<div class="container main-container">
<div class=" top">
<div class="row-fluid">
<div class="col-lg-12">
<img src="images/header.jpg" alt="#" />
</div>
<div class="col-lg-12">
<div class="photo col-lg-2 col-lg-offset-2">
<img src="images/best_friends_logo.png" alt="#" />
</div>
<div class="info col-lg-8">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus velit nec sagittis mattis. Sed et tellus blandit turpis vulputate eleifend. </h1>
</div>
</div>
</div>
</div>
</div>
For each section of vertical contents, you will have to create a new row.
Your code should be something like this. To make things clear from the demo, I'm replacing lg with xs.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<img class="img-responsive" src="https://placehold.it/2048x128" alt="#" />
</div>
</div>
<div class="row">
<div class="photo col-xs-4">
<img class="img-responsive" src="https://placehold.it/512x1024" alt="#" />
</div>
<div class="info col-xs-8">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus velit nec sagittis mattis. Sed et tellus blandit turpis vulputate eleifend. </h1>
</div>
</div>
</div>
I am trying to put an image and texts side by side in bootstrap inside a single div.. For that I used the class of thumbnail. But using bootstrap thumbnail it makes the image to go at the top and all the texts at the bottom.
So I changed it a bit to put the image and the texts within the thumbnail only and dividing the thumbnail into two parts. But on resizing the screen into small the problem is arising.. The texts are shifting over the image..
Here is the code of what I tried till now
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6">
<div class="thumbnail" style="border:none; background:white; height:210px;">
<div class="col-sm-6 col-md-6 col-xs-6">
<img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
<h3>Hello World</h3>
<p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa. </p>
</div>
</div>
</div>
</div>
Screenshot without resizing
Screenshot after resizing
Try this
<div class="col-sm-6 col-md-6 col-xs-6">
<div class="thumbnail" style="border:none; background:white;">
<div class="col-sm-6 col-md-6 col-xs-12 image-container">
<img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
</div>
<div class="col-sm-6 col-md-6 col-xs-12">
<h3>Hello World</h3>
<p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa. </p>
</div>
</div>
</div>
css code write this in media query if u need only for mobile
.image-container{text-align:center}
in case if u need both the image and text side by side in mobile device,
remove the height for the image in media query to mobile devices resolution, give width 100% to the image
You need to make sure you're using div's with the class of row around your columns, also if you're going to have col-xs-6 it sets this columns size (6) on the larger sizes too (no need to use col-sm-6 etc also).
Try this code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="border:none; background:white; height:210px;">
<div class="col-xs-6">
<img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
</div>
<div class="col-xs-6">
<h3>Hello World</h3>
<p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
</div>
</div>