I have two divs, I want one to the left and the other to the right (like this).
I've tried self-align-start and self-align-end in each column, but it didn't result in what I want. I also put the class row-cols-1 (not in the screenshot).
What am I missing? Here's my code:
.about-me {
max-width: 300px;
}
.current-work {
max-width: 300px;
}
<body>
<section id="about" class="container-fluid">
<div class="row row-cols-1 justify-content-between">
<div class="about-me col-6">
<h2> About Me </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>
</div>
<div class="current-work col-6">
<h2> What I'm Doing </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>
</div>
</section>
</body>
And here's the result
You can try offset-3 in the second div class attribute.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-9">
<div class="item">
<h1>ABOUT ME</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident. Soluta magni quo incidunt ducimus tempora nisi?t amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident. Soluta magni quo incidunt ducimus tempora nisi?</p>
</div>
</div>
<div class="col-9 offset-3 text-end">
<div class="item">
<h1>ABOUT ME</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident. Soluta magni quo incidunt ducimus tempora nisi?</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can use .me-auto & .text-start for left aligned, and use .ms-auto & .text-end for right aligned.
:root {
--heavy-red-border: 1em solid red;
}
.red-border-start {
border-left: var(--heavy-red-border);
}
.red-border-end {
border-right: var(--heavy-red-border);
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-9 me-auto text-start red-border-start">
<div class="item">
<h1>ABOUT ME</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident.</p>
</div>
</div>
<div class="col-9 ms-auto text-end red-border-end">
<div class="item">
<h1>ABOUT ME</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident.
Soluta magni quo incidunt ducimus tempora nisi?</p>
</div>
</div>
</div>
</div>
</body>
</html>
Related
main{
flex:1;
}
html{
height: 100%;
}
.flex-bodyContainer{
display: flex;
flex-direction: column;
flex-grow: 1;
height: inherit;
}
body {
font-family: "Lato", "Helvetica Neue", "Helvetica", sans-serif;
margin: 0;
height: inherit;
}
* { box-sizing: border-box; }
.flex-container {
display: flex;
height:100%;
}
.flex-item{
padding: 1em;
}
.flex-item#0{
flex-basis: 240px;
}
.flex-item#1{
flex: 1;
flex-grow: fill;
background-color: #eee;
}
.flex-item#1, .flex-ImageContainer{
display:flex;
flex-wrap: wrap;
justify-content: center;
}
.flex-item#1 .flex-ImageContainer .flex-imageItem{
flex: 0 0 250px;
background-color: white;
margin:0.5rem;
padding: .5rem 1rem;
border-radius: 10px;
box-shadow: 0 1 3px;
}
.flex-item#1 .flex-ImageContainer .flex-item .flex-imageItem p{
padding:0.5rem 1rem;
}
.flex-item#2{
flex-basis: 180px;
flex-shrink: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cards</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- normalize.css for cross-browser stuff -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="flex-bodyContainer">
<main>
<div class="flex-container">
<section class="flex-item" id="0">
<h1>Cards</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, ullam! Provident at accusantium, explicabo odio laborum ducimus earum amet repudiandae commodi quod distinctio, iste reprehenderit nihil ullam dolorum illo fugit.</p>
</section>
<section class="flex-item" id="1">
<div class="flex-ImageContainer">
<div class="flex-imageItem">
<!-- Card 1 -->
<img src="img/abstract1.jpg" alt="abstract art">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, laborum.</p>
</div>
<div class="flex-imageItem">
<!-- Card 2 -->
<img src="img/abstract2.jpg" alt="abstract art">
<p>Doloremque commodi unde eaque! Et natus dolorum corrupti ut numquam.</p>
</div>
<div class="flex-imageItem">
<!-- Card 3 -->
<img src="img/abstract3.jpg" alt="abstract art">
<p>Odio praesentium cum nemo nesciunt architecto, quam voluptate porro inventore.</p>
</div>
<div class="flex-imageItem"></div>
<!-- Card 4 -->
<img src="img/abstract4.jpg" alt="abstract art">
<p>Dignissimos consequuntur maxime harum debitis ratione, culpa iure pariatur quaerat?</p>
</div>
<div class="flex-imageItem">
<!-- Card 5 -->
<img src="img/abstract5.jpg" alt="abstract art">
<p>Odit id earum commodi tempora voluptatum mollitia dolorum, perspiciatis nulla!</p>
</div>
</div>
</section>
<section class="flex-item" id="2">
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Delectus, aliquid vitae?</li>
<li>Vero, molestias debitis.</li>
<li>Obcaecati, vitae amet?</li>
<li>A, nulla dolore!</li>
<li>Error, nesciunt at.</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quo voluptates sint laudantium quaerat commodi!</p>
<p>Aliquam, harum cumque aspernatur consectetur tempore dicta explicabo facere, adipisci sunt quas perferendis repudiandae sequi!</p>
<p>Dolore aut error distinctio! Nemo impedit ipsum sunt neque vel enim unde incidunt nam consequuntur!</p>
</section>
</div>
</main>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<title>Cards</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- normalize.css for cross-browser stuff -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css"> </head>
Cards
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, ullam! Provident at accusantium, explicabo odio laborum
ducimus earum amet repudiandae commodi quod distinctio, iste
reprehenderit nihil ullam dolorum illo fugit.
<section class="flex-item" id="1">
<div class="flex-ImageContainer">
<div class="flex-imageItem">
<!-- Card 1 -->
<img src="img/abstract1.jpg" alt="abstract art">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, laborum.</p>
</div>
<div class="flex-imageItem">
<!-- Card 2 -->
<img src="img/abstract2.jpg" alt="abstract art">
<p>Doloremque commodi unde eaque! Et natus dolorum corrupti ut numquam.</p>
</div>
<div class="flex-imageItem">
<!-- Card 3 -->
<img src="img/abstract3.jpg" alt="abstract art">
<p>Odio praesentium cum nemo nesciunt architecto, quam voluptate porro inventore.</p>
</div>
<div class="flex-imageItem"></div>
<!-- Card 4 -->
<img src="img/abstract4.jpg" alt="abstract art">
<p>Dignissimos consequuntur maxime harum debitis ratione, culpa iure pariatur quaerat?</p>
</div>
<div class="flex-imageItem">
<!-- Card 5 -->
<img src="img/abstract5.jpg" alt="abstract art">
<p>Odit id earum commodi tempora voluptatum mollitia dolorum, perspiciatis nulla!</p>
</div>
</div>
</section>
<section class="flex-item" id="2">
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Delectus, aliquid vitae?</li>
<li>Vero, molestias debitis.</li>
<li>Obcaecati, vitae amet?</li>
<li>A, nulla dolore!</li>
<li>Error, nesciunt at.</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quo voluptates sint laudantium quaerat commodi!</p>
<p>Aliquam, harum cumque aspernatur consectetur tempore dicta explicabo facere, adipisci sunt quas perferendis
repudiandae sequi!
Dolore aut error distinctio! Nemo impedit ipsum sunt neque vel enim unde incidunt nam consequuntur!
I am a beginner at Html and CSS I have added buttons on my Html file and I want to show and use them on multiple pages, in other divs and classes with the same functionality, but after a lot of tries I am unable to do it can anyone help me? here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="pageone">
<p id="line1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. <br> Sint magni provident cum nemo dolorum non voluptatibus <br> amet alias quidem veniam facere nobis, excepturi, doloremque <br> tenetur dolore voluptatem quibusdam sapiente nam.</p>
<p id="line2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. <br> Sint magni provident cum nemo dolorum non voluptatibus <br> amet alias quidem veniam facere nobis, excepturi, doloremque <br> tenetur dolore voluptatem quibusdam sapiente nam.</p>
</div>
<div class="pagetwo">
<div class="buttons">
<button id="btn" type="submit" value="submit">Product</button>
<button id="btn" type="submit" value="submit">Pricing</button>
<button id="btn" type="submit" value="submit" >About</button>
<button id="btn" type="submit" value="submit">Support</button>
<button id="btn" type="submit" value="submit">Blog</button>
</div>
<p id="line3">Lorem ipsum dolor, sit amet consectetur adipisicing elit. <br> Corporis distinctio eaque quae, voluptates illo pariatur <br> officiis, ratione eius minus rerum vitae, aliquam omnis <br> quam suscipit delectus dolorum deserunt cum animi. <br>
Lorem ipsum dolor sit amet .
</div>
<div class="pagethree">
<span class="line"></span>
<p id="line4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. <br> Corporis distinctio eaque quae, voluptates illo pariatur <br> officiis, ratione eius minus rerum vitae, aliquam omnis <br> quam suscipit delectus dolorum deserunt cum animi. <br>
Lorem ipsum dolor sit amet .</p>
<span>
<img src="blank.jpg" alt="" id="logo1">
</span>
<p id="line5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. <br> Corporis distinctio eaque quae, voluptates illo pariatur <br> officiis, ratione eius minus rerum vitae, aliquam omnis <br> quam suscipit delectus dolorum deserunt cum animi. <br>
Lorem ipsum dolor sit amet .</p>
</div>
<div class="pagefour4">
<p id="line6">Lorem ipsum dolor, sit amet consectetur adipisicing elit. <br> Corporis distinctio eaque quae, voluptates illo pariatur <br> officiis, ratione eius minus rerum vitae, aliquam omnis <br> quam suscipit delectus dolorum deserunt cum animi. <br></p>
<span>
<img src="blank.jpg" alt="" id="logo2">
</span>
<p id="line7">Lorem ipsum dolor, sit amet consectetur adipisicing elit. <br> Corporis distinctio eaque quae, voluptates illo pariatur <br> officiis, ratione eius minus rerum vitae, aliquam omnis <br> quam suscipit delectus dolorum deserunt cum animi. <br>
</p>
<hr id="hline"></hr>
</div>
</body>
</html>
There are ways this could be archived but unfortunetry it would require you to use template engines, or frameworks like teact, or angular, but those are more advanced,
Your only option is to copy an paste the buttons on the different html files
I am using Bootstrap 5 row property to make my website responsive. However, when I try to add 2 divs next to each other, they don't seem to align at the very center of the webpage, instead, there is quite an unused gap at the right that I can't get rid of. For this section I am using class="container". Any tips? Code below. I also added an image of how it looks when I inspect.
<h1> (SPH) </h1>
<div class="row">
<div class="box col-lg-6">
<h3> Who We Are </h3>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus fuga repellendus minima maiores beatae unde odit eius in sint optio. Ipsum optio neque beatae quod necessitatibus dolor iste quae voluptatibus. </p>
</div>
<div class="box col-lg-6">
<h3> What We Do </h3>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam saepe illum dolores corporis suscipit enim at non temporibus perspiciatis corrupti dicta pariatur, veritatis beatae error doloremque voluptates. Eius, eveniet accusantium. </p>
</div>
</div>
As mentioned in the comments.
You can use a class at the top of your page like : container.
Example:
<div class= container justify-content-center> /your code here/ </div>
The other answer has a few semantic issues so I'd figured I post one. Essentially, you should nest your Bootstrap row into a container. Then you can add justify-content-center on the row because it has a display: flex; by default.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="container">
<h1 class="text-center"> (SPH) </h1>
<div class="row justify-content-center">
<div class="box col-lg-6">
<h3> Who We Are </h3>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus fuga repellendus minima maiores beatae unde odit eius in sint optio. Ipsum optio neque beatae quod necessitatibus dolor iste quae voluptatibus. </p>
</div>
<div class="box col-lg-6">
<h3> What We Do </h3>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam saepe illum dolores corporis suscipit enim at non temporibus perspiciatis corrupti dicta pariatur, veritatis beatae error doloremque voluptates. Eius, eveniet accusantium. </p>
</div>
</div>
</div>
I am trying to layout a grid in bootstrap that consists on the desktop of a full 12 column layout, inside that, there is a 8 column grid and a 4 column grid. the 8 column grid is filled with an image/text, the 4 column grid consists in its own of 2 elements below each other containting image/text.
on smaller breakpoint the layout should simply show 3 elements in same size below each other.
I fiddled around but I do not get it to work. Below you also find next to the html a sketch from what I am trying to achieve. Any hints? I do not feel this is possible out of the box with bootstrap 4.
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
doloremque molestiae harum! Rem!</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
<div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
doloremque molestiae harum! Rem!</p>
</div>
</div>
</div>
</div>
</div>
</section>
As a sketch it looks like this:
You need to specify the smaller col width. You also had an extra unnecessary row and col wrapping it. Below is a working example of what you are looking for. col-12 class was added for any screen smaller than md
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-md-8">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
</div>
<div class="col-12 col-md-4">
<div class="row">
<div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
<div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
</div>
</div>
</div>
Please try this snippet.
.row {
margin: 20px 0;
}
.col .card {
height: calc(100% - 10px);
}
.card{
margin-bottom: 10px;
}
.card img {
width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col col-sm">
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
</div>
</div>
</div>
i am working with bootstrap ? row splited into col-sm-6 and same another now image portion is complete with in height of 720px but text has more height then image not i want to align rest of the text below the image or in complete width of frame??
assets/images/posts/ " style="height: 100%; width: 100%; object-fit: contain;border-radius: 20px;">
If you just want the text to wrap around the image then you just need
Bootstrap class="pull-left" on the images. Here I am giving an example of it, hopefully it will help you.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wrapping Image with Text</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
.row {
margin-top: 30px;
}
.pull-left {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<img class="pull-left img-thumbnail" src="https://placeimg.com/100/100/people" alt="...">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p>
</div>
<div class="col-md-4">
<img class="pull-left img-thumbnail" src="https://placeimg.com/100/100/nature" alt="...">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p>
</div>
<div class="col-md-4">
<img class="pull-left img-thumbnail" src="https://placeimg.com/100/100/arch" alt="...">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p>
</div>
</div>
</div>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>