How to place these Divs next to each other? - html

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>

Related

fullpage.js is not able to scroll

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.

How to make text fill div without overflowing?

I am trying to fill the text in the grids such that it is readable on all kinds of devices. I also want the text to be center aligned (vertically and horizontally).
HTML:
<div class="d-none d-lg-block">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<h1 class="display-6">Solar Tracker</h1>
<div class="v-align">
<p class="text">The Solar Tracker is a device that that controls the positioning of a Solar Panel as to utilize the maximum amount of sunlight available. </p>
<button onclick="window.location.href='projects/solar_tracker.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Plant Grower</h1>
<div class="v-align">
<p class="text">A controlled environment to grow plants indoors, using an Arduino, a grow light, and various sensors.</p>
<button onclick="window.location.href='projects/plant.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Home Automation</h1>
<div class="v-align">
<p class="text">Home Automation is building systems which allow us to digitally control the appliances in our homes.</p>
<button onclick="window.location.href='projects/home_automation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">PCB Design</h1>
<div class="v-align">
<p class="text">PCB stands for Printed Circuit Board. A printed circuit board mechanically supports and electrically connects electrical or electronic components using conductive tracks, pads and other features etched from one or more sheet layers of copper laminated onto and/or between sheet layers of a non-conductive substrate.</p>
<button onclick="window.location.href='projects/pcb_design.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Studio Griot</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/studio_griot.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Web Development</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/web_development.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Data Visualisation</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/data_visualisation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Stem CS Labs</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/stem_cs.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
</div>
</div>
CSS:
#media(min-width:1100px){
.row{
height: 50vh;
}
.col-lg-3{
text-align: center;
position: relative;
}
.v-align{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
}
#media(min-width:750px){
.row{
height: 50vh;
}
}
.alternate_2{
background-color: rgb(250,244,246);
}
.display-6{
padding-top: 20px;
}
.text{
text-align: center;
}
Desktop Output:
Laptop Output:
iPad Output:
As you can see in all the outputs, the text within the grid is either too small to read (desktop), overflowing from the grid (laptop), or changes the grid size (iPad). What I am trying to do it to keep make the text readable and centered, along with retaining the grid shape of the page, on all devices. How can I do this?
Thank you

Using flexbox and auto margins we can align vertically and horizontally.
Demo
[flex]{
width:400;
height:200px;
border:1px solid;
display:flex;
}
[flex]>span{
margin:auto;
}
<p flex><span>Some text</span><p>
auto margins will consume white space evenly on all sides, We can do the same using alignment Properties However since flexbox does true centering it that would case the same issue as the one you're facing related
.row {
height: 50vh;
}
.col-lg-3 {
text-align: center;
}
.alternate_2 {
background-color: rgb(250,244,246);
}
.display-6 {
padding-top: 20px;
}
.text {
text-align: center;
}
/* New */
.col-lg-3 {
text-align: center;
overflow:auto;
height:100%;
display: flex;
flex-direction: column;
}
/* Former .v-align class, Now manages centering on both axis*/
.centerVH{
margin:auto;
/* Since the text fills all the width, We Must reduce it's width */
max-width:75%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-none d-lg-block">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<h1 class="display-6">Solar Tracker</h1>
<div class="centerVH"><p class="text">The Solar Tracker is a device that that controls the positioning of a Solar Panel as to utilize the maximum amount of sunlight available. </p>
<button onclick="window.location.href='projects/solar_tracker.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Plant Grower</h1>
<div class="centerVH"><p class="text">A controlled environment to grow plants indoors, using an Arduino, a grow light, and various sensors.</p>
<button onclick="window.location.href='projects/plant.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Home Automation</h1>
<div class="centerVH"><p class="text">Home Automation is building systems which allow us to digitally control the appliances in our homes.</p>
<button onclick="window.location.href='projects/home_automation.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">PCB Design</h1>
<div class="centerVH"><p class="text">PCB stands for Printed Circuit Board. A printed circuit board mechanically supports and electrically connects electrical or electronic components using conductive tracks, pads and other features etched from one or more sheet layers of copper laminated onto and/or between sheet layers of a non-conductive substrate.</p>
<button onclick="window.location.href='projects/pcb_design.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Studio Griot</h1>
<div class="centerVH"><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/studio_griot.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Web Development</h1>
<div class="centerVH"><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/web_development.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Data Visualisation</h1>
<div class="centerVH"><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/data_visualisation.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Stem CS Labs</h1>
<div class="centerVH"><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/stem_cs.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
</div>
</div>
An issue will arise when 50vh on .row would be shorter than the text, I made .col-lg-3 scrollable when that happens, However it's up to you how you want to deal with it.

I suggest not to over complicate things in CSS, there are better ways, and more reliable, to do this. Use CSS Flex for example.
.alternate_2 {
background-color: rgb(250,244,246);
}
.row {
display: flex;
flex-wrap: wrap;
text-align: center;
}
.col-lg-3 {
width: 100%;
padding: 2vw;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.v-align, .text {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.text {
justify-content: center;
}
#media(min-width: 500px) {
.col-lg-3 {
width: 50%;
}
}
#media(min-width: 1200px) {
.col-lg-3 {
width: 25%;
}
}
<div class="d-none d-lg-block">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<h1 class="display-6">Solar Tracker</h1>
<div class="v-align">
<p class="text">The Solar Tracker is a device that that controls the positioning of a Solar Panel as to utilize the maximum amount of sunlight available. </p>
<button onclick="window.location.href='projects/solar_tracker.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Plant Grower</h1>
<div class="v-align">
<p class="text">A controlled environment to grow plants indoors, using an Arduino, a grow light, and various sensors.</p>
<button onclick="window.location.href='projects/plant.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Home Automation</h1>
<div class="v-align">
<p class="text">Home Automation is building systems which allow us to digitally control the appliances in our homes.</p>
<button onclick="window.location.href='projects/home_automation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">PCB Design</h1>
<div class="v-align">
<p class="text">PCB stands for Printed Circuit Board. A printed circuit board mechanically supports and electrically connects electrical or electronic components using conductive tracks, pads and other features etched from one or more sheet layers of copper laminated onto and/or between sheet layers of a non-conductive substrate.</p>
<button onclick="window.location.href='projects/pcb_design.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Studio Griot</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/studio_griot.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Web Development</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/web_development.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Data Visualisation</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/data_visualisation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Stem CS Labs</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/stem_cs.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
</div>
</div>
</div>

Can't seem to get my bootstrap grid/flex-boxes right

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>

Bootstrap columns with other columns inside

I am new to bootstrap and I want to know if I put columns inside another bootstrap column, how can I calculate it?
For example below my first col-md-6 has to "inside" classes. Can I put bootstrap columns to those two boxes? If yes, how can I calculate the number of columns?
I want those tho boxes to be one next to each other, like you put to both float left, but with bootstrap if is possible.
<div class="container-fluid">
<div class=" left-side col-md-6">
<div class="page inside">
<h1>This Is A Title</h1>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
</div>
<div class="page inside">
<h1>This Is A Title</h1>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
</div>
<div class="">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin magna in aliquam hendrerit. Duis facilisis ipsum in scelerisque convallis. Vestibulum eget vehicula arcu. Suspendisse viverra accumsan euismod. Maecenas ac felis at mi pellentesque porta. Vestibulum sed metus et enim molestie sodales. Etiam auctor magna ac tincidunt dignissim. </p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin magna in aliquam hendrerit. Duis facilisis ipsum in scelerisque convallis. Vestibulum eget vehicula arcu. Suspendisse viverra accumsan euismod. Maecenas ac felis at mi pellentesque porta. Vestibulum sed metus et enim molestie sodales. Etiam auctor magna ac tincidunt dignissim. </p>
</div>
</div>
<div class="middle-side col-md-3">
<div class="page">
<h1>This Is A Title</h1>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
</div>
<div class="page">
<h1>This Is A Title</h1>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
</div>
<div class="page">
<h1>This Is A Title</h1>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
<div class="page-text">
<p>This is the price <span>$735</span></p>
</div>
</div>
</div>
</div>

Twitter Bootstrap is a 12 column framework so all columns per row should add up to 12.
So yes you can add columns inside other columns as long as you wrap the new columns within a new row div like this:
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="row"> <!-- new row added here -->
<div class="col-md-3">
....
</div>
<div class="col-md-9">
<div class="row"> <!-- even another row for new columns -->
<div class="col-md-5">
....
</div>
<div class="col-md-7">
....
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
....
</div>
</div>
</div>

Put a photo to the bottom of other photo using bootstrap

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>