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>
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.
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'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>
I'm having some difficulties placing these two divs next to eachother.
Can you solve these in the .html file, so without the css?
<div>
<div style="float: left">
<div class="wrapper" style="width: 50%;float: left;">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
<div style="float: left;">
<div class="wrapper" style="width: 50%;">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
</div>
Since I have to add some more text: the two divs have to be 50% of the width. Thanks
You need to add the float inside the wrapper and not on its container to fix your actual code. Also add overflow:auto to parent container to avoid overflow issue:
<div style="overflow:auto;border:1px solid;">
<div class="wrapper" style="width: 50%;float: left;">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
<div class="wrapper" style="width: 50%;float: left;">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
Use display:flex attribute
<div style="display:flex">
<div style="">
<div class="wrapper" style="">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
<div style="">
<div class="wrapper" style="">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
</div>
<div>
<div style="float: left;width: 50%;">
<div class="wrapper" style="float: left;">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a>
</footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
<div style="float: left;width: 50%;">
<div class="wrapper" style="">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.
</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a>
</footer>
<!-- ################################################################################################ -->
</article>
</div>
</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>