I just started bootstrap and I had an issue which I am not able to resolve
when I give margin to my section in code the third section comes down although I have given width to be col-md-4 I'm not able to give margin in order to separate the sections also there is one small issue when the browserwidth goes less than 768px the section stack (which I want) but a scroll bar to view from left to right also comes which I don't won't can you please help me and sorry for posting code like this I'm new to stackoverflow.
body {
background: #F13421;
font-size: 16px;
margin: 0;
}
#header-nav {
border-radius: 0;
}
.container {
border: none;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 0;
padding: 10px 10px 0 10px;
}
.navbar-brand h1 {
font-size: 2em;
margin-top: -5px;
margin-bottom: 40px;
line-height: 0.65;
}
#nav-list {
margin-top: 0;
margin-bottom: 0;
background: #F1F021;
}
#nav-list hr {
width: 90%;
}
.row {
margin: 10px;
}
#tiles section {
background: #D3D3D3 ;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Module 3 Solution</title>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand"><h1>Food, LLC</h1>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right visible-xs">
<li class="text-center">
<div>Chicken</div>
<hr class="visible-xs">
</li>
<li class="text-center">
Beef
<hr class="visible-xs">
</li>
<li class="text-center">
Sushi
</li>
</ul>
</div>
</div><!--END OF CONTAINER-->
</nav><!--END OF NAV-->
</header><!--END OF HEADER-->
<div id="main-content" class="container-fluid">
<h2 class="text-center">Our Menu</h2>
<div id="tiles" class="row">
<section id="chicken" class="col-md-4 col-sm-6 col-xs-12">
<h3>Chicken</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dignissimos aut quasi quibusdam aspernatur possimus officia nulla consectetur velit! At, asperiores dolorem. Et iure assumenda, repudiandae laudantium, voluptatibus ex dignissimos, eum quaerat ducimus cupiditate corporis totam. Illo, alias voluptatem accusamus ut natus consequuntur quis laboriosam doloribus porro vero assumenda quo temporibus quos quam quisquam, libero quod, itaque eius sit ducimus totam iste possimus architecto debitis? Commodi ut minima maiores consequuntur voluptates unde deleniti error vero tempora, eligendi blanditiis, deserunt aliquam nobis porro dolores tenetur amet eius! Aspernatur, vitae. Suscipit, dolores quos doloribus. Velit repudiandae provident a, in ad id aspernatur dolor ratione eos placeat, ex temporibus ipsum eligendi sequi reprehenderit cupiditate perferendis eaque, explicabo blanditiis nemo dolorem aperiam minima deleniti. Tempore, rem, quam? Totam non reiciendis amet, at reprehenderit inventore, adipisci nesciunt itaque dolorum asperiores, ducimus corrupti quam impedit quaerat autem quod officia tempora. Itaque dicta deleniti fugit, laudantium rerum sint consectetur asperiores, quia veritatis dignissimos esse in nesciunt distinctio facere iure facilis voluptatibus placeat voluptate voluptatum expedita animi a veniam nulla ea. Enim aliquid, non. Necessitatibus nam fugiat autem quae qui quam consequatur repudiandae quidem ipsam impedit distinctio, sequi doloribus, quaerat quod ab maxime. Harum facilis sed commodi reprehenderit? <div>(End of Chicken Section) <span>Back to Top</span></div></p>
</section>
<section id="beef" class="col-md-4 col-sm-6 col-xs-12 ">
<h3>Beef</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dignissimos aut quasi quibusdam aspernatur possimus officia nulla consectetur velit! At, asperiores dolorem. Et iure assumenda, repudiandae laudantium, voluptatibus ex dignissimos, eum quaerat ducimus cupiditate corporis totam. Illo, alias voluptatem accusamus ut natus consequuntur quis laboriosam doloribus porro vero assumenda quo temporibus quos quam quisquam, libero quod, itaque eius sit ducimus totam iste possimus architecto debitis? Commodi ut minima maiores consequuntur voluptates unde deleniti error vero tempora, eligendi blanditiis, deserunt aliquam nobis porro dolores tenetur amet eius! Aspernatur, vitae. Suscipit, dolores quos doloribus. Velit repudiandae provident a, in ad id aspernatur dolor ratione eos placeat, ex temporibus ipsum eligendi sequi reprehenderit cupiditate perferendis eaque, explicabo blanditiis nemo dolorem aperiam minima deleniti. Tempore, rem, quam? Totam non reiciendis amet, at reprehenderit inventore, adipisci nesciunt itaque dolorum asperiores, ducimus corrupti quam impedit quaerat autem quod officia tempora. Itaque dicta deleniti fugit, laudantium rerum sint consectetur asperiores, quia veritatis dignissimos esse in nesciunt distinctio facere iure facilis voluptatibus placeat voluptate voluptatum expedita animi a veniam nulla ea. Enim aliquid, non. Necessitatibus nam fugiat autem quae qui quam consequatur repudiandae quidem ipsam impedit distinctio, sequi doloribus, quaerat quod ab maxime. Harum facilis sed commodi reprehenderit?<div>(End of Beef Section) <span>Back to Top</span></div></p>
</section>
<section id="sushi" class="col-md-4 col-sm-12 col-xs-12">
<h3>Sushi</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dignissimos aut quasi quibusdam aspernatur possimus officia nulla consectetur velit! At, asperiores dolorem. Et iure assumenda, repudiandae laudantium, voluptatibus ex dignissimos, eum quaerat ducimus cupiditate corporis totam. Illo, alias voluptatem accusamus ut natus consequuntur quis laboriosam doloribus porro vero assumenda quo temporibus quos quam quisquam, libero quod, itaque eius sit ducimus totam iste possimus architecto debitis? Commodi ut minima maiores consequuntur voluptates unde deleniti error vero tempora, eligendi blanditiis, deserunt aliquam nobis porro dolores tenetur amet eius! Aspernatur, vitae. Suscipit, dolores quos doloribus. Velit repudiandae provident a, in ad id aspernatur dolor ratione eos placeat, ex temporibus ipsum eligendi sequi reprehenderit cupiditate perferendis eaque, explicabo blanditiis nemo dolorem aperiam minima deleniti. Tempore, rem, quam? Totam non reiciendis amet, at reprehenderit inventore, adipisci nesciunt itaque dolorum asperiores, ducimus corrupti quam impedit quaerat autem quod officia tempora. Itaque dicta deleniti fugit, laudantium rerum sint consectetur asperiores, quia veritatis dignissimos esse in nesciunt distinctio facere iure facilis voluptatibus placeat voluptate voluptatum expedita animi a veniam nulla ea. Enim aliquid, non. Necessitatibus nam fugiat autem quae qui quam consequatur repudiandae quidem ipsam impedit distinctio, sequi doloribus, quaerat quod ab maxime. Harum facilis sed commodi reprehenderit?<div>(End of Sushi Section) <span>Back to Top</span></div></p>
</section>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
There are basic HTML issues. First you need close paragraphs and then start new divs. Secondly, there are fundamental designing issues. Anyways. Here is the updated code for responsive navbar layout ;-).
body {
background: #F13421;
font-size: 16px;
margin: 0;
}
#main-content{
padding-top: 50px;
}
.chicken, .beef, .sushi {
background-color: #D3D3D3 ;
padding: 10px;
}
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Food LLC</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Chicken <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sushi</a>
</li>
</ul>
</div>
</nav>
<!--END OF HEADER-->
<div id="main-content" class="container">
<h2 class="text-center mt-4">Our Menu</h2> </div>
<div class="container">
<div id="tiles" class="row">
<div class="col-md-4 ">
<div class="wrapper mt-4">
<div class="chicken">
<h3>Chicken</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dignissimos aut quasi quibusdam aspernatur possimus officia nulla consectetur velit! At, asperiores dolorem. Et iure assumenda, repudiandae laudantium, voluptatibus ex dignissimos, eum quaerat ducimus cupiditate corporis totam. Illo, alias voluptatem accusamus ut natus consequuntur quis laboriosam doloribus porro vero assumenda quo temporibus quos quam quisquam, libero quod, itaque eius sit ducimus totam iste possimus architecto debitis? Commodi ut minima maiores consequuntur voluptates unde deleniti error vero tempora, eligendi blanditiis, deserunt aliquam nobis porro dolores tenetur amet eius! Aspernatur, vitae. Suscipit, dolores quos doloribus. Velit repudiandae provident a, in ad id aspernatur dolor ratione eos placeat, ex temporibus ipsum eligendi sequi reprehenderit cupiditate perferendis eaque, explicabo blanditiis nemo dolorem aperiam minima deleniti. Tempore, rem, quam? Totam non reiciendis amet, at reprehenderit inventore, adipisci nesciunt itaque dolorum asperiores, ducimus corrupti quam impedit quaerat autem quod officia tempora. Itaque dicta deleniti fugit, laudantium rerum sint consectetur asperiores, quia veritatis dignissimos esse in nesciunt distinctio facere iure facilis voluptatibus placeat voluptate voluptatum expedita animi a veniam nulla ea. Enim aliquid, non. Necessitatibus nam fugiat autem quae qui quam consequatur repudiandae quidem ipsam impedit distinctio, sequi doloribus, quaerat quod ab maxime. Harum facilis sed commodi reprehenderit?</p>
<div>(End of Chicken Section) <span>Back to Top</span></div>
</div>
</div></div>
<div class="col-md-4 ">
<div class="wrapper mt-4">
<div class="beef">
<h3>Beef</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dignissimos aut quasi quibusdam aspernatur possimus officia nulla consectetur velit! At, asperiores dolorem. Et iure assumenda, repudiandae laudantium, voluptatibus ex dignissimos, eum quaerat ducimus cupiditate corporis totam. Illo, alias voluptatem accusamus ut natus consequuntur quis laboriosam doloribus porro vero assumenda quo temporibus quos quam quisquam, libero quod, itaque eius sit ducimus totam iste possimus architecto debitis? Commodi ut minima maiores consequuntur voluptates unde deleniti error vero tempora, eligendi blanditiis, deserunt aliquam nobis porro dolores tenetur amet eius! Aspernatur, vitae. Suscipit, dolores quos doloribus. Velit repudiandae provident a, in ad id aspernatur dolor ratione eos placeat, ex temporibus ipsum eligendi sequi reprehenderit cupiditate perferendis eaque, explicabo blanditiis nemo dolorem aperiam minima deleniti. Tempore, rem, quam? Totam non reiciendis amet, at reprehenderit inventore, adipisci nesciunt itaque dolorum asperiores, ducimus corrupti quam impedit quaerat autem quod officia tempora. Itaque dicta deleniti fugit, laudantium rerum sint consectetur asperiores, quia veritatis dignissimos esse in nesciunt distinctio facere iure facilis voluptatibus placeat voluptate voluptatum expedita animi a veniam nulla ea. Enim aliquid, non. Necessitatibus nam fugiat autem quae qui quam consequatur repudiandae quidem ipsam impedit distinctio, sequi doloribus, quaerat quod ab maxime. Harum facilis sed commodi reprehenderit?</p>
<div>(End of Beef Section) <span>Back to Top</span></div>
</div>
</div></div>
<div class="col-md-4 ">
<div class="wrapper mt-4">
<div class="sushi">
<h3>Sushi</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dignissimos aut quasi quibusdam aspernatur possimus officia nulla consectetur velit! At, asperiores dolorem. Et iure assumenda, repudiandae laudantium, voluptatibus ex dignissimos, eum quaerat ducimus cupiditate corporis totam. Illo, alias voluptatem accusamus ut natus consequuntur quis laboriosam doloribus porro vero assumenda quo temporibus quos quam quisquam, libero quod, itaque eius sit ducimus totam iste possimus architecto debitis? Commodi ut minima maiores consequuntur voluptates unde deleniti error vero tempora, eligendi blanditiis, deserunt aliquam nobis porro dolores tenetur amet eius! Aspernatur, vitae. Suscipit, dolores quos doloribus. Velit repudiandae provident a, in ad id aspernatur dolor ratione eos placeat, ex temporibus ipsum eligendi sequi reprehenderit cupiditate perferendis eaque, explicabo blanditiis nemo dolorem aperiam minima deleniti. Tempore, rem, quam? Totam non reiciendis amet, at reprehenderit inventore, adipisci nesciunt itaque dolorum asperiores, ducimus corrupti quam impedit quaerat autem quod officia tempora. Itaque dicta deleniti fugit, laudantium rerum sint consectetur asperiores, quia veritatis dignissimos esse in nesciunt distinctio facere iure facilis voluptatibus placeat voluptate voluptatum expedita animi a veniam nulla ea. Enim aliquid, non. Necessitatibus nam fugiat autem quae qui quam consequatur repudiandae quidem ipsam impedit distinctio, sequi doloribus, quaerat quod ab maxime. Harum facilis sed commodi reprehenderit?</p>
<div>(End of Sushi Section) <span>Back to Top</span></div>
</div>
</div></div>
</div></div
The JS Fiddle Link as follows:
https://jsfiddle.net/hilalrehan/s2kezpgq/
If you want nav bar to be not responsive. Please follow this link
https://jsfiddle.net/hilalrehan/Lwkm1zdc/51/
I believe this will solve your problem.
Related
We have this page. Our requirements are:
the page itself must not have a scroll bar.
The card must fill the remaining space vertically (even if there is no content in the card-body).
The content of the card-body sometime is too long. So we want to have scroll bar for card-body only.
We could not achieve the all the requirement without using a fixed height.
If we used a fixed height we will break the 2nd requirement!
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
body {
padding-top: 5rem;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<nav style="" class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container-fluid">
<div class="row">
<div class="col-12">
<div class="d-flex flex-column">
<div class="py-2 text-center rounded-top" style="background: rgb(238, 238, 238);">
Top Header
</div>
<div class="align-self-stretch flex-fill">
<div class="card shadow-sm">
<div class="card-header">
Featured
</div>
<div class="card-body">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js"
integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
crossorigin="anonymous"></script>
</body>
</html>
Would you help please?
You can achieve with help of calc() function of CSS and add predefined overflow-auto class in card-body div if content over then auto scrollbar will show.
Helpful Link
https://www.w3schools.com/cssref/func_calc.asp
https://getbootstrap.com/docs/4.6/utilities/overflow/
body {
padding-top: 5rem;
}
.card-fill{
height: calc(100vh - 5rem - 1rem); /*reduce padding-top 5rem of body and 1rem for bottom gap*/
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card card-fill shadow-sm">
<div class="card-header">
Featured
</div>
<div class="card-body overflow-auto">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore vel corporis excepturi sapiente repellendus cum eius alias, adipisci ut cupiditate quas nesciunt quis accusantium explicabo mollitia consequuntur assumenda laudantium velit cumque. Reprehenderit nobis temporibus fugiat a assumenda deleniti voluptate fuga ex hic nesciunt atque aliquid, soluta obcaecati debitis porro commodi laudantium tempore. Mollitia perspiciatis doloremque expedita neque necessitatibus, ipsam at voluptatum pariatur assumenda, debitis repellat reprehenderit repudiandae sequi similique, quibusdam iusto asperiores non ea. Alias quos, excepturi doloremque enim dolores beatae sed rem, vitae reprehenderit suscipit delectus fuga esse ipsam ipsa sit eveniet, atque laudantium? Deserunt inventore nemo optio quis expedita modi delectus, consequuntur magnam dignissimos ad officiis porro doloribus minima voluptatibus nobis ea, mollitia assumenda fugiat at illum. Et, cumque labore! Sequi magni aperiam rerum minus! Eum ipsam vel labore saepe dicta cupiditate sit nemo voluptatem nesciunt. Quo perferendis eligendi nobis odit nemo totam possimus cupiditate, accusamus placeat laborum, obcaecati eum, voluptatibus sequi ut quisquam numquam praesentium itaque saepe dolorem doloribus dolores cum sed dicta. Iusto debitis eligendi, natus magni dolore facere fugit quod vero enim delectus nostrum distinctio ab tempora aut quisquam. Alias nisi odit veritatis ab eum minima ipsum repudiandae mollitia assumenda, quisquam, tempore consequatur reiciendis dolorem dicta corporis accusantium a. Inventore, harum quidem, expedita commodi ea sunt delectus ut, aspernatur cupiditate officia voluptatibus quis sequi aliquam ipsa praesentium dicta recusandae ipsum in odio obcaecati aperiam nesciunt dolorem non porro. Dignissimos ipsa unde impedit quos eius dolores fuga quas dolorum quae culpa quam ex, voluptatibus nesciunt nostrum iure obcaecati minima numquam saepe earum modi explicabo excepturi beatae, aut esse. Ab esse distinctio quasi facere aspernatur eligendi vel dignissimos error voluptates ipsa, sequi corrupti unde, magni rerum et, eveniet animi voluptatem cupiditate! Illum, dolor necessitatibus. Aperiam optio dolor at dolores autem numquam. Quasi aperiam harum magnam pariatur fuga iusto incidunt sapiente expedita laboriosam magni voluptatibus molestiae, ex tenetur similique non voluptate quibusdam cum! Eveniet atque animi assumenda id ab rem officiis omnis, hic sapiente quidem soluta nihil, consequuntur sint. Incidunt eum voluptas praesentium nesciunt deserunt qui nemo, animi nihil! Voluptas natus officia maxime inventore facilis id dolorem odit molestiae ut provident, placeat aspernatur laudantium quis modi deserunt, quasi mollitia blanditiis earum nisi illo animi! Quos reprehenderit excepturi obcaecati incidunt fugiat beatae, laborum debitis quae architecto quibusdam quaerat porro nemo natus ipsum sint cupiditate aliquam suscipit velit quis rem esse temporibus. Iste similique excepturi autem tempore sit. Harum tempore tempora molestias nihil labore, ipsam sequi quia ipsum, inventore minus cumque consequatur dolores, ex aliquam. Enim quis excepturi temporibus velit laboriosam ducimus! Ipsam, ad unde suscipit necessitatibus iusto in neque voluptates quod dolorem! Nihil sed eum tenetur dolor aut nulla ipsum quidem fugit totam! Iure dicta est inventore velit in quibusdam debitis ducimus a, aspernatur enim omnis sequi dolorum eius provident voluptas culpa officia nisi labore reprehenderit? Facilis placeat quas, commodi aut tenetur esse corrupti reiciendis debitis nesciunt reprehenderit tempora provident eveniet? In, ex. Animi repellat necessitatibus error perspiciatis, commodi delectus rerum aspernatur, blanditiis numquam ullam exercitationem sint! Expedita possimus quod ex, veritatis non quas voluptates itaque fugit dignissimos dolore earum neque consequuntur laboriosam quia, maxime aperiam iure at iste suscipit culpa, asperiores doloremque cumque! Facere saepe odio eos eligendi, quis quas nam, molestias soluta atque maiores cum dolorem, dolorum iste harum consequuntur! Nihil voluptatum tempore cum mollitia deserunt? A aperiam impedit, aliquid illo ipsa similique numquam non enim repudiandae quasi quaerat odit corporis voluptates unde autem ex incidunt nisi veritatis soluta repellendus, accusantium molestias quae id. Voluptatem quisquam amet iure iste esse, sequi ex maiores soluta natus est, debitis provident aut adipisci, commodi et ullam totam labore id. Dignissimos ea fuga modi iure quasi nesciunt, ipsum incidunt! Nemo error qui hic culpa. Quaerat, repellat fuga a nam doloribus odio deleniti dolor, dignissimos veniam, debitis error voluptatem. Animi ullam dolores itaque, quidem sapiente fuga, deleniti iure illo ea autem, id alias cumque explicabo a quia ratione nihil odit deserunt eius distinctio suscipit dignissimos. Deserunt nesciunt assumenda eum alias fugiat natus quibusdam cumque dolorem placeat dignissimos distinctio, rerum consequuntur ipsam. Dignissimos ullam voluptatum quisquam voluptas assumenda pariatur ex totam at enim unde dolore, non natus itaque omnis voluptate illum veniam necessitatibus, error, repellendus facere deserunt? Saepe soluta mollitia iste commodi, doloribus similique, aliquam recusandae eligendi officiis delectus maxime quos? Quam at quo non dolores? Voluptas tenetur rerum error eos quo quam in, excepturi odio doloremque vero a rem beatae adipisci itaque ratione blanditiis. Temporibus, porro aperiam id eius, molestiae quas deserunt perspiciatis magni numquam autem maxime consequuntur provident error inventore mollitia soluta nobis enim voluptatem! Dicta facere similique tempore libero nesciunt tempora magni quas atque commodi culpa quaerat nam voluptatum vero iste at quis, hic perferendis debitis nulla accusamus voluptatibus repellat! Temporibus voluptatum at in accusantium labore officiis? Necessitatibus, quasi obcaecati. Saepe, odit! Temporibus in voluptate minus soluta obcaecati tempore sed, quas necessitatibus iste quasi, illum ipsa quos provident. Tempora ipsa ad, mollitia delectus quas possimus iure beatae tempore eaque, ab non sint ut itaque nobis ullam molestiae fugit adipisci totam quod obcaecati id. A, quas obcaecati perferendis cum laborum soluta, quo dolores sapiente ipsam explicabo nam voluptatum molestiae nesciunt? Labore nulla quos ad architecto ab laborum aliquid assumenda ipsam magni non veritatis, at possimus suscipit eos recusandae consectetur numquam hic accusantium nesciunt. Tempore magni sunt itaque iste? Magni quidem consequuntur in adipisci nesciunt, qui cum ut et quis, sit ducimus, facere reprehenderit unde neque? Facilis atque nam quod! Asperiores ex eius tempora molestiae ducimus harum rem ipsam hic nihil magni, dolorem, doloribus illum veniam laborum amet quae sit in impedit neque quod ullam nostrum est. Reiciendis temporibus nulla nostrum? In itaque iste consequatur a veniam, atque voluptas velit labore nulla autem tempore, corrupti omnis. Qui modi, ab voluptate laborum repellendus dignissimos molestiae inventore similique quas recusandae necessitatibus aspernatur repellat, blanditiis voluptatem porro tenetur illo? Id iure pariatur nesciunt. Quo eligendi earum reprehenderit praesentium atque sunt accusantium fugit tempora, alias delectus accusamus consequatur veniam quos, debitis asperiores illum vel optio recusandae, maxime aperiam eveniet in ab ut nesciunt. Officia temporibus, illum quidem recusandae vel laborum dolores veritatis quae aut, eum quo iusto quibusdam reprehenderit error eos, corrupti nisi atque fugit ea velit blanditiis. Eaque hic voluptas, quis expedita, similique quasi modi adipisci voluptate dignissimos voluptatum reiciendis provident saepe ex nam aliquid nobis. Fugit saepe magnam, cupiditate obcaecati iusto alias numquam rem dolore maiores veritatis vitae debitis provident quos asperiores consequuntur nobis aliquam incidunt ipsum eos dolor velit aliquid. Dolorem inventore neque explicabo alias optio esse aut cum rem ex ipsa. A, sapiente nam velit perferendis ipsam distinctio soluta mollitia ullam? Ipsam quasi autem id doloribus, atque explicabo provident iure voluptates! Beatae nisi vel eum quidem, esse deserunt, nihil accusamus aliquid tempore, et distinctio ut totam illo excepturi voluptas vero maxime eaque itaque minus magni omnis sit. Error animi debitis, optio expedita dignissimos suscipit. Repellendus ea molestiae libero sint perferendis, saepe aliquid obcaecati, natus a quia sed quisquam ex quasi illum, incidunt ad nisi quo vero praesentium. Error excepturi ipsam iste repudiandae ad quidem deserunt debitis minus earum asperiores corporis, reiciendis in aperiam dolorem reprehenderit animi rerum. Aperiam maxime porro aliquam accusamus repudiandae odio eligendi nisi ipsa quod minus at temporibus, labore fuga deserunt et illum repellat. Minima beatae eligendi, quis illo consectetur reiciendis labore voluptates quam dolorem natus dolor autem tempore nulla, a dolorum consequatur eum explicabo necessitatibus molestiae exercitationem. Veritatis nisi hic magni itaque dicta architecto enim. Quis a rerum odit incidunt sed reprehenderit blanditiis quaerat ipsum recusandae. Reiciendis, culpa recusandae illum itaque doloribus eaque molestiae nesciunt quam quis non, officiis consectetur perspiciatis? Saepe sint, sequi dolor harum, maiores illo, sit nemo numquam ratione delectus asperiores voluptatibus. Ipsum, nulla sint! Illo quaerat quas fugiat itaque consectetur magni quidem tempora molestiae voluptate? Ipsam, illo. Amet consequatur nulla facilis enim molestiae quas illum doloremque, ducimus id aut nostrum, nesciunt ea quasi quaerat minima neque perferendis officiis omnis corrupti officia! Vitae doloribus velit, est, facere rem aperiam, tempora quis nisi explicabo harum rerum dicta incidunt! Distinctio est nam expedita ipsam dicta illo quibusdam deserunt autem. Fugiat quisquam minima cumque qui voluptas animi, eaque ex voluptatum sunt laudantium sint, reiciendis quam vero, quaerat quasi accusamus rem quia. Ullam, iste. Culpa eveniet quidem nisi non, sed facilis ipsa iure. Perferendis consectetur hic expedita corporis, minima saepe doloremque tempore. Dolorem quasi soluta repellat nulla. Aut quasi ex aliquam nemo tenetur maiores, nesciunt omnis natus laborum, dolor iure. Quos fugiat hic, excepturi laudantium neque omnis, doloribus enim eligendi impedit, earum cupiditate ea harum eius sit asperiores similique ducimus! Accusantium sequi beatae rem neque, rerum magnam sed expedita libero fuga ipsa odio non sit vero quis quos voluptatem. Dolorem libero deserunt magni quos cupiditate. Omnis nobis, et voluptas laboriosam asperiores aut. Voluptates ipsum ea accusamus molestias distinctio ut totam voluptate, nulla a eos nihil nam asperiores quos praesentium ab et nesciunt autem expedita, harum, consequatur vero saepe! Eveniet ea ipsa veniam, expedita molestias facere ab architecto veritatis, voluptatum culpa fuga similique tempore, repellat voluptatem iste laborum? Rerum minus nostrum sit odit, quis praesentium eligendi vitae non aut vel recusandae maxime velit similique aperiam facere? Provident, natus. Autem, iste eligendi eos ipsam dolore fugiat aliquid, sit quod architecto, expedita dolorem. Magnam, tempora? Inventore sunt deleniti tenetur, libero molestias hic ad eius. Mollitia cupiditate sapiente ad tenetur consequuntur quo cum non quisquam a, nam facilis sed necessitatibus ullam perferendis odio quis suscipit rem velit incidunt iure ipsa voluptatem at doloremque ipsam. Minima repellendus nulla cum recusandae officia illo numquam at reiciendis expedita assumenda, facilis eum commodi sint totam harum asperiores qui facere similique adipisci deserunt labore doloremque nesciunt reprehenderit? Soluta numquam adipisci ut laboriosamofficia. Debitis, eius.<br><br>
Last Line
</p>
</div>
</div>
</div>
</div>
</main>
Okay, so I have a problem with css/scss. It's difficult to explain, but I will do my best. Attaching images to better communicate what I'm trying to say.
I have a container div which contains five child divs:
Like this
These child divs contain FAQ questions that reveal the answer when the user clicks on a question. Hence, the div will grow vertically. The mockup I have received shows the tapped answer opening and "pushing" the below div downwards, while all other divs remain in place:
Like this
So, my question is, how do I go about this? I have tried making the parent div a flexbox, table and grid, but the problem still stands. I have also tried to make the child divs into floats, but that pushes the element to the side rather than downwards.
I picture placing the items in columns, which I could do if the divs were hardcoded, but they are created dynamically in a for loop:
#foreach (var category in Model.Content.Children().Where(x => x.IsVisible() && x.DocumentTypeAlias == "fAQSamling"))
{
<div class="faq-main-card question">
<div class="faq-header">
<object type="image/svg+xml" data="--"></object>
<h3 class="heading-24">#category.Name</h3>
</div>
#foreach (var question in category.Children().Where(x => x.IsVisible() && x.DocumentTypeAlias == "faqItem"))
{
<div class="question">
<h4 class="faq-question-title" title="Klicka för att visa svaret på frågan.">
#(question.HasValue("faqQuestion") ? question.GetPropertyValue("faqQuestion") : question.Name)
<object type="image/svg+xml" data="--"></object>
</h4>
<div>
#question.GetPropertyValue("fAQAnswer")
</div>
</div>
}
</div>
}
I hope I have explained properly. Please ask me to clarify if I need to. If it is relevant to the solution, the "answers" are set to height 0 with overflow hidden when closed, and when opened they're set to height 'auto'. The opening function is written in vanilla JS.
Hello instead of using flex i have used bootstrap row and column to do the task but the example cannot be used in all type of situations.
.hello{
padding: 20px;
text-align: justify;
height: 400px;
overflow: hidden;
background-color: salmon;
margin: 30px;
}
.hello h1{
text-align: center;
}
.hello:hover{
height: 100%;
padding-bottom: 0 ;
}
<!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="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="hello"><h1>asa</h1> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa corrupti eos assumenda voluptatibus voluptatum tenetur quae dolorum soluta recusandae natus blanditiis omnis in, nulla commodi saepe provident vel laboriosam architecto? Modi omnis dolor sint, corrupti ipsum possimus! Repellat temporibus suscipit aspernatur, nulla illum dolorem facere magnam. Nam necessitatibus reprehenderit nisi eius cumque. Eius ex quaerat perspiciatis fugit eum, necessitatibus deleniti excepturi dolor, omnis saepe quia aliquam accusantium amet incidunt repudiandae, asperiores velit porro aspernatur sint? Possimus dolorum consequuntur provident dolorem praesentium sint ea et sequi nisi. Incidunt temporibus illo commodi voluptate ex molestias necessitatibus inventore at facilis dolore, consequatur officiis adipisci vel, magni impedit suscipit itaque, mollitia maxime optio qui voluptatem sequi! Omnis error adipisci veniam animi numquam tenetur quam minus dolorem ex sit perferendis facere nisi, ratione aut excepturi quae eos officiis laboriosam! Debitis doloribus maiores sit, voluptatem amet optio distinctio laboriosam a porro, qui corporis. Fuga, quam dignissimos.</div>
<div class="hello"><h1>asfa</h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa corrupti eos assumenda voluptatibus voluptatum tenetur quae dolorum soluta recusandae natus blanditiis omnis in, nulla commodi saepe provident vel laboriosam architecto? Modi omnis dolor sint, corrupti ipsum possimus! Repellat temporibus suscipit aspernatur, nulla illum dolorem facere magnam. Nam necessitatibus reprehenderit nisi eius cumque. Eius ex quaerat perspiciatis fugit eum, necessitatibus deleniti excepturi dolor, omnis saepe quia aliquam accusantium amet incidunt repudiandae, asperiores velit porro aspernatur sint? Possimus dolorum consequuntur provident dolorem praesentium sint ea et sequi nisi. Incidunt temporibus illo commodi voluptate ex molestias necessitatibus inventore at facilis dolore, consequatur officiis adipisci vel, magni impedit suscipit itaque, mollitia maxime optio qui voluptatem sequi! Omnis error adipisci veniam animi numquam tenetur quam minus dolorem ex sit perferendis facere nisi, ratione aut excepturi quae eos officiis laboriosam! Debitis doloribus maiores sit, voluptatem amet optio distinctio laboriosam a porro, qui corporis. Fuga, quam dignissimos.</div>
</div>
<div class="col-md-4">
<div class="hello"><h1>asfs</h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa corrupti eos assumenda voluptatibus voluptatum tenetur quae dolorum soluta recusandae natus blanditiis omnis in, nulla commodi saepe provident vel laboriosam architecto? Modi omnis dolor sint, corrupti ipsum possimus! Repellat temporibus suscipit aspernatur, nulla illum dolorem facere magnam. Nam necessitatibus reprehenderit nisi eius cumque. Eius ex quaerat perspiciatis fugit eum, necessitatibus deleniti excepturi dolor, omnis saepe quia aliquam accusantium amet incidunt repudiandae, asperiores velit porro aspernatur sint? Possimus dolorum consequuntur provident dolorem praesentium sint ea et sequi nisi. Incidunt temporibus illo commodi voluptate ex molestias necessitatibus inventore at facilis dolore, consequatur officiis adipisci vel, magni impedit suscipit itaque, mollitia maxime optio qui voluptatem sequi! Omnis error adipisci veniam animi numquam tenetur quam minus dolorem ex sit perferendis facere nisi, ratione aut excepturi quae eos officiis laboriosam! Debitis doloribus maiores sit, voluptatem amet optio distinctio laboriosam a porro, qui corporis. Fuga, quam dignissimos.</div>
<div class="hello"><h1>asfa</h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa corrupti eos assumenda voluptatibus voluptatum tenetur quae dolorum soluta recusandae natus blanditiis omnis in, nulla commodi saepe provident vel laboriosam architecto? Modi omnis dolor sint, corrupti ipsum possimus! Repellat temporibus suscipit aspernatur, nulla illum dolorem facere magnam. Nam necessitatibus reprehenderit nisi eius cumque. Eius ex quaerat perspiciatis fugit eum, necessitatibus deleniti excepturi dolor, omnis saepe quia aliquam accusantium amet incidunt repudiandae, asperiores velit porro aspernatur sint? Possimus dolorum consequuntur provident dolorem praesentium sint ea et sequi nisi. Incidunt temporibus illo commodi voluptate ex molestias necessitatibus inventore at facilis dolore, consequatur officiis adipisci vel, magni impedit suscipit itaque, mollitia maxime optio qui voluptatem sequi! Omnis error adipisci veniam animi numquam tenetur quam minus dolorem ex sit perferendis facere nisi, ratione aut excepturi quae eos officiis laboriosam! Debitis doloribus maiores sit, voluptatem amet optio distinctio laboriosam a porro, qui corporis. Fuga, quam dignissimos.</div>
</div>
<div class="col-md-4">
<div class="hello"><h1>asfa</h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa corrupti eos assumenda voluptatibus voluptatum tenetur quae dolorum soluta recusandae natus blanditiis omnis in, nulla commodi saepe provident vel laboriosam architecto? Modi omnis dolor sint, corrupti ipsum possimus! Repellat temporibus suscipit aspernatur, nulla illum dolorem facere magnam. Nam necessitatibus reprehenderit nisi eius cumque. Eius ex quaerat perspiciatis fugit eum, necessitatibus deleniti excepturi dolor, omnis saepe quia aliquam accusantium amet incidunt repudiandae, asperiores velit porro aspernatur sint? Possimus dolorum consequuntur provident dolorem praesentium sint ea et sequi nisi. Incidunt temporibus illo commodi voluptate ex molestias necessitatibus inventore at facilis dolore, consequatur officiis adipisci vel, magni impedit suscipit itaque, mollitia maxime optio qui voluptatem sequi! Omnis error adipisci veniam animi numquam tenetur quam minus dolorem ex sit perferendis facere nisi, ratione aut excepturi quae eos officiis laboriosam! Debitis doloribus maiores sit, voluptatem amet optio distinctio laboriosam a porro, qui corporis. Fuga, quam dignissimos.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
This Raw code requires quite a lot of more editing to be put in use.
I want the body section to scroll all the way up, with the sidebar section to the top of the screen, through multiple trial-and-error, the sidebar can do that, but the content section goes back to the bottom. I want when entering that page that the content and sidebar are aligned. Did I overlook where?
<style>
/* The side navigation menu */
.sidebar {
margin: 0;
padding: 0;
width: 230px;
background-color: #f1f1f1;
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 0 15px;
}
</style>
sidebar section
<div class="sidebar">
sidebar
sidebar
sidebar
</div>
content section
<div class="content">
<div class="col-12" id="main">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h1">content</h1>
</div>
<div class="card border-success">
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto voluptatem, soluta error at sequi cum veniam dolorem obcaecati ratione sunt accusamus saepe fugiat ipsam modi reiciendis facilis illum necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus eveniet ab sed cumque repudiandae qui assumenda, aut quibusdam libero similique voluptatibus dolor dolorem fugiat explicabo? Quia illum illo maxime modi?</p>
</div>
</div>
</div>
You can use flexbox to get the desired result.
Here's an example:
.wrapper {
display: flex;
justify-content: space-between;
}
.sidebar {
position: sticky;
top: 0;
width: 230px;
height: 100vh;
}
.content {
width: 900px;
padding: 0 10px;
}
<div class="wrapper">
<div class="sidebar">
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Sunt, accusamus repudiandae.</li>
<li>Cumque, vitae ut.</li>
<li>Officiis, a esse.</li>
<li>Soluta, maiores commodi.</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde quis quas ut enim corrupti error, alias praesentium assumenda cum iure nam ipsum recusandae sint facilis quia cupiditate obcaecati tempore maxime ea qui vel eveniet eius nulla ad. Nemo
cum repellat eum eos placeat. Repellendus autem sapiente maiores error officia maxime qui neque illo nemo magnam?</p>
<p>Delectus quae ipsa quos aliquam officia. Error facere perspiciatis veritatis, doloremque nisi nesciunt quaerat cumque repellendus nam cum minus ratione. Culpa repudiandae at, perspiciatis ad ea ducimus minima molestiae rerum aut laudantium non, placeat
exercitationem saepe, impedit velit tempore distinctio illum? Libero cumque a illum perspiciatis, praesentium ea tempore dolor ducimus, consequuntur veniam aut ipsa?</p>
<p>Omnis, fuga asperiores in, dolorum optio facilis ea eaque ad dolor quidem, harum magnam nisi? Voluptate deserunt et, pariatur eum similique ab ex quisquam rem, possimus nemo eius! Veritatis, deleniti dolorum ex eveniet eaque aut rerum, exercitationem
in quisquam, adipisci explicabo provident quae non praesentium fugiat. Molestias laudantium obcaecati animi aliquam corrupti delectus iste rem.</p>
<p>Nobis aliquam cum commodi, nesciunt suscipit nemo hic reiciendis ullam doloribus distinctio consequatur, neque totam. Esse atque soluta, necessitatibus minus debitis illum error, provident totam quam quae tempore, blanditiis nobis! Eligendi dolor
illum error fuga ex distinctio. Quibusdam, omnis modi ratione consectetur, porro doloremque inventore dolorem dolores perspiciatis neque cupiditate iusto dolore voluptas blanditiis autem.</p>
<p>Impedit id eius rerum optio? Similique repellat optio nostrum, ratione maiores aperiam et. Obcaecati, iste. Saepe eligendi libero recusandae repellat, commodi ab placeat id nobis aliquam neque dolorum ipsa minima harum pariatur eaque reiciendis assumenda
perferendis animi officia! Maiores totam et quia, nulla libero odio accusantium voluptatibus, maxime, perspiciatis porro rerum dolores eaque veritatis officia!</p>
<p>Reprehenderit ducimus, saepe omnis, vel deserunt maiores nostrum similique dolorem dolorum libero nisi iste repellat ullam odit, veritatis est officiis ut adipisci fuga eius illo necessitatibus esse ratione doloremque. Accusamus neque inventore dicta
ipsa iusto ex debitis labore est, adipisci odit suscipit repellendus sit atque aliquid omnis provident explicabo minima necessitatibus sapiente nobis ratione quam.</p>
<p>Velit, consectetur veritatis et non sunt corporis repellendus totam saepe nihil voluptate exercitationem dignissimos in corrupti culpa, excepturi necessitatibus vitae fugiat. Exercitationem dolores voluptas, numquam ea libero voluptatem consequuntur
necessitatibus quia iusto quam, aperiam repellendus molestias nobis sapiente. Corrupti autem nemo commodi maxime libero assumenda nulla, animi modi alias, consequatur facilis cumque accusantium sapiente architecto!</p>
</div>
</div>
Hello I've just started learning and I'm trying to build a layout on HTML5 but I don't exactly understand how can I put the paragraph to the place I want. For example, I'm floating some paragraphs to the left and then floating some other paragraphs to the right but it turns out like this:
I want purple and green paragraphs to be on the left and the rest to be on the right.
.hersey {
width: 1140px;
margin-left: auto;
margin-right: auto;
}
.ilk {
background-color: darkmagenta;
float: left;
}
.iki {
background-color: green;
float: left;
}
.thr {
background-color: hotpink;
float: right;
}
.author {
background-color: yellow;
}
<div class="hersey">
<div class="ilk">
<h1>Document</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, consequuntur? Suscipit qui, molestiae beatae non eaque id, vitae nesciunt in eveniet voluptatibus natus molestias quis.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis adipisci possimus illum quidem nulla, dolores omnis est quibusdam commodi, qui hic expedita blanditiis repellat reprehenderit doloribus iure suscipit, molestias placeat et rem dignissimos
cum sint! Consequatur dignissimos laboriosam beatae dolor ut a, necessitatibus corporis quidem quas? Dicta excepturi dolore ipsam dignissimos, amet blanditiis libero illum, voluptate vero temporibus laudantium fuga illo aperiam exercitationem! Voluptatum,
aliquid vero cupiditate, eveniet quasi velit nisi architecto quis eaque magni, iure adipisci sint perferendis similique!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi laborum dignissimos corporis omnis earum hic illum sint. Qui sequi dolor hic eos ad labore dolorum repellendus recusandae, officiis excepturi in laudantium ullam ratione neque ipsam ea
minima vero numquam tempore perferendis. Aliquam asperiores temporibus quaerat molestiae id adipisci. Officiis impedit, explicabo nam eligendi possimus cumque ipsa nobis omnis, rem, natus reprehenderit minus in veritatis qui? Temporibus iure, doloremque
reprehenderit, voluptate tenetur assumenda quas, incidunt repudiandae minus recusandae ratione minima. Cum commodi itaque voluptatibus odit quisquam minus obcaecati consequuntur ex consequatur?</p>
</div>
<div class="iki">
<h2>Other Documents For U</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, sed? Est quaerat corrupti aspernatur eos quae sequi magni esse labore magnam, impedit neque cupiditate incidunt asperiores. Facere quas temporibus quos numquam maxime eius aliquid alias
earum! Necessitatibus illo aut molestiae id repudiandae laboriosam, totam ipsa, ut debitis qui libero odit suscipit dolorem, porro perspiciatis nemo veritatis similique reiciendis ex? Dolore qui, eos, quisquam voluptas voluptates earum suscipit
quas sequi ad et iusto quasi corrupti ipsam labore non natus, odit architecto aperiam a tempora quidem quae obcaecati consequuntur! Est, incidunt obcaecati? Corrupti, fugiat nostrum nemo recusandae rem tempora vel reprehenderit, itaque natus consequatur
at possimus eius dolorum magnam cum, impedit mollitia maxime delectus repudiandae qui. Quae natus quibusdam illum aliquid cum.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente alias corrupti autem? Nostrum commodi reprehenderit laudantium quam dolores deserunt officia obcaecati error quo atque, sunt inventore, iusto accusantium repellendus ipsam animi aliquam.
Accusamus eum, reprehenderit harum corrupti magni, cumque vitae reiciendis quod, enim consequatur ipsum molestias totam quis! Non, earum necessitatibus fuga velit nostrum eius fugiat minima vero eos, voluptatum praesentium vel iure dolorum cupiditate
libero veritatis quo illum tempore! Qui nesciunt necessitatibus dignissimos dolorem ea dolor neque nam tempora officiis numquam dolorum aliquam aspernatur eum deserunt sed alias error eos, voluptatem odit nemo, possimus incidunt repellendus sint
placeat. Fugit sequi provident, ipsam possimus inventore fuga facilis tempore, illum quis!</p>
</div>
<div class="thr">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="author">
<h4>Writer</h4>
<p>Babark17</p>
<p><img src="me2.jpg" alt=""></p>
</div>
Appreciate your help, I know it's a beginners question but I really couldn't understand how to do it.
I think you're looking for the text-align propriety in CSS.
Simply, text-align: right; puts an element's contents into the right, don't use float: right because it doesn't do that for the contents.
Here's your code:
.hersey {
width: 1140px;
margin-left: auto;
margin-right: auto;
}
.ilk {
background-color: darkmagenta;
text-align: left;
}
.iki {
background-color: green;
text-align: left;
}
.thr {
background-color: hotpink;
text-align: right;
}
.author {
background-color: yellow;
width: 100%;
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<div class="hersey">
<div class="ilk">
<h1>Document</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, consequuntur? Suscipit qui, molestiae beatae non eaque id, vitae nesciunt in eveniet voluptatibus natus molestias quis.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis adipisci possimus illum quidem nulla, dolores omnis est quibusdam commodi, qui hic expedita blanditiis repellat reprehenderit doloribus iure suscipit, molestias placeat et rem dignissimos cum sint! Consequatur dignissimos laboriosam beatae dolor ut a, necessitatibus corporis quidem quas? Dicta excepturi dolore ipsam dignissimos, amet blanditiis libero illum, voluptate vero temporibus laudantium fuga illo aperiam exercitationem! Voluptatum, aliquid vero cupiditate, eveniet quasi velit nisi architecto quis eaque magni, iure adipisci sint perferendis similique!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi laborum dignissimos corporis omnis earum hic illum sint. Qui sequi dolor hic eos ad labore dolorum repellendus recusandae, officiis excepturi in laudantium ullam ratione neque ipsam ea minima vero numquam tempore perferendis. Aliquam asperiores temporibus quaerat molestiae id adipisci. Officiis impedit, explicabo nam eligendi possimus cumque ipsa nobis omnis, rem, natus reprehenderit minus in veritatis qui? Temporibus iure, doloremque reprehenderit, voluptate tenetur assumenda quas, incidunt repudiandae minus recusandae ratione minima. Cum commodi itaque voluptatibus odit quisquam minus obcaecati consequuntur ex consequatur?</p>
</div>
<div class="iki">
<h2>Other Documents For U</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, sed? Est quaerat corrupti aspernatur eos quae sequi magni esse labore magnam, impedit neque cupiditate incidunt asperiores. Facere quas temporibus quos numquam maxime eius aliquid alias earum! Necessitatibus illo aut molestiae id repudiandae laboriosam, totam ipsa, ut debitis qui libero odit suscipit dolorem, porro perspiciatis nemo veritatis similique reiciendis ex? Dolore qui, eos, quisquam voluptas voluptates earum suscipit quas sequi ad et iusto quasi corrupti ipsam labore non natus, odit architecto aperiam a tempora quidem quae obcaecati consequuntur! Est, incidunt obcaecati? Corrupti, fugiat nostrum nemo recusandae rem tempora vel reprehenderit, itaque natus consequatur at possimus eius dolorum magnam cum, impedit mollitia maxime delectus repudiandae qui. Quae natus quibusdam illum aliquid cum.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente alias corrupti autem? Nostrum commodi reprehenderit laudantium quam dolores deserunt officia obcaecati error quo atque, sunt inventore, iusto accusantium repellendus ipsam animi aliquam. Accusamus eum, reprehenderit harum corrupti magni, cumque vitae reiciendis quod, enim consequatur ipsum molestias totam quis! Non, earum necessitatibus fuga velit nostrum eius fugiat minima vero eos, voluptatum praesentium vel iure dolorum cupiditate libero veritatis quo illum tempore! Qui nesciunt necessitatibus dignissimos dolorem ea dolor neque nam tempora officiis numquam dolorum aliquam aspernatur eum deserunt sed alias error eos, voluptatem odit nemo, possimus incidunt repellendus sint placeat. Fugit sequi provident, ipsam possimus inventore fuga facilis tempore, illum quis!</p>
</div>
<div class="thr">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="author">
<h4>Writer</h4>
<p>Babark17</p>
<img src="me2.jpg" alt="">
</div>
</div>
</body>
</html>
A living demo: https://codepen.io/marchmello/pen/zYvxbdO
I want to have three columns of text appear on the screen and a jumbotron like
this. When I run the site, I just get a jumbotron at the top, and then three rows of text each taking up 100% of the page width. How do I get bootstrap to turn the divs into a proper grid layout? I have tried putting other rows inside like some tutorials said to do, but they all failed. Any ideas how I could achieve a working grid layout?
.jumbotron {
padding: 30px 10px;
background-color: #d8d8d8;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lorem ipsum dolor sit.</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row">
<div class="jumbotron">
<div class="container">
<h1>Lorem ipsum dolor.</h1>
<h3>Lorem ipsum dolor sit amet, consectetur.</h3>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint quas neque, alias repudiandae autem. Laudantium commodi ratione qui facere similique consequatur repudiandae, fugit odio incidunt soluta nihil dicta quasi animi, laboriosam fuga pariatur
possimus vel. Ex odit repellat commodi temporibus perspiciatis neque, iste, rem eaque, ipsum vel inventore sunt facere assumenda cum modi ea facilis quisquam adipisci sed nihil dolores nesciunt expedita. Magnam iusto ad a cupiditate corporis
provident at, asperiores eum aliquid adipisci soluta quidem debitis numquam. Vel fuga omnis ea, rem quidem voluptatibus inventore expedita repudiandae quaerat voluptatem, at autem tempore aperiam, suscipit consequatur similique aspernatur laudantium
consequuntur!
</p>
</div>
<div class="col-md-6">
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, asperiores, dolore. Distinctio, quia, dolor dolore cumque veritatis consequatur perferendis aliquam soluta beatae aperiam odit praesentium animi omnis reprehenderit ullam ea deserunt
consequuntur totam. Aperiam debitis labore vero perferendis fuga in quas dolore, odio amet, incidunt, quidem natus eos blanditiis ad dolores fugiat minima ut iste ullam totam ducimus assumenda asperiores, voluptate vitae cumque? Inventore laboriosam
ducimus culpa tempore eligendi voluptatibus optio, placeat eum necessitatibus blanditiis rem voluptates ea illum beatae architecto minima, autem saepe quibusdam expedita dolorum. Maiores at deserunt laboriosam ab dolorum libero, suscipit ullam
veniam ipsum non minima, aperiam, commodi rerum! Magnam dignissimos magni optio porro minus, deserunt totam sequi, voluptas doloremque voluptatibus est, aperiam unde repellendus vel odit facere ipsam velit consequuntur praesentium cumque ea,
quisquam natus. Dicta reiciendis voluptas, facere placeat in fugit perspiciatis architecto totam harum ducimus quisquam nemo, sapiente natus praesentium esse nihil inventore distinctio minus molestiae possimus earum ea tenetur? A velit, dicta
eaque iste explicabo aliquid, aspernatur animi atque at totam voluptatum vel maxime voluptas error libero rerum quam voluptatem porro deleniti perferendis ab commodi vitae. Veniam ad, vero voluptatem exercitationem ex dolor voluptatum, aperiam
cupiditate dolore hic officiis quasi modi. Hic dolore temporibus, tenetur, obcaecati facere quos similique nesciunt amet tempora fugiat incidunt dolorem placeat minus totam recusandae laborum, cum exercitationem aliquid sunt fugit iure ab. Maxime,
itaque aliquid? Non repellendus unde id. Vel reiciendis omnis doloremque molestiae necessitatibus incidunt voluptatum eveniet repellat enim perspiciatis itaque at dolorem tempore alias error, repellendus nulla quia corrupti cupiditate. Obcaecati
delectus saepe error cumque ex, deleniti tenetur necessitatibus beatae at quis fugiat vitae natus laboriosam aperiam eveniet reiciendis ipsa repudiandae. Necessitatibus maiores unde eveniet aspernatur autem eligendi soluta non iure, molestiae
repudiandae quisquam, id quaerat sint. Autem at architecto eligendi aut voluptatem voluptatibus vitae accusantium quod assumenda consectetur libero eveniet recusandae, consequuntur repudiandae id suscipit unde nulla delectus eum sed, neque enim
ipsam. Optio nesciunt dolorum iure omnis aspernatur. Recusandae est aut sit delectus minima repellat nisi dolorem impedit velit deserunt optio magni, laboriosam accusamus facilis veritatis perspiciatis similique quia eius explicabo. Veniam odio
corporis rem nemo, sunt quod asperiores adipisci aut tempore architecto quo sapiente ex ad nisi et vitae amet deleniti corrupti, nesciunt doloribus unde repellat. Libero sint quod ab amet natus, non assumenda sit magnam, similique, itaque ratione
soluta nobis! Natus laborum nobis necessitatibus nihil veniam eveniet quos beatae repellendus saepe!
</h5>
</div>
<div class="col-md-3">
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum aperiam incidunt ducimus officia! Quos dolorem iure fugit eligendi a omnis totam modi molestias eaque natus, deleniti eum! Veniam accusamus laborum optio neque corporis ut obcaecati
saepe facilis, deserunt. Maiores perferendis architecto incidunt sequi nesciunt quia blanditiis a voluptatum nam nemo unde hic facere cumque ex pariatur dicta, culpa neque eum minus! Facere similique facilis dolor vitae adipisci molestias sapiente
eaque temporibus, libero quam, excepturi labore. Ratione deleniti id ut quo magni facilis optio repudiandae, sed. Minima itaque recusandae, doloremque minus sit veniam? Odio nesciunt vero reiciendis soluta possimus aspernatur totam autem magnam
blanditiis eos impedit animi veniam harum saepe aliquam, modi tenetur cum? Esse iusto similique, perspiciatis quod eum voluptatibus doloribus, labore asperiores tempore! Inventore deleniti eum minima nam corporis eius doloribus labore perferendis
a cum, enim molestiae odit cumque qui, distinctio. Ab fuga ipsa nostrum, doloribus aspernatur, quaerat, possimus quis corrupti ducimus ullam officia inventore. Itaque, iure, ut. Enim odit vel cupiditate accusamus aliquid recusandae consequatur
officia nesciunt, beatae nam. Culpa eos ratione aliquid dolorem nostrum minima, tenetur mollitia animi laboriosam at iusto placeat alias, officiis explicabo veniam inventore, doloremque odit. Doloribus et sint dolores. Rem consequuntur sed ratione!</h6>
</div>
</div>
</div>
<div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</div>
</body>
</html>
.container comes first.
Then the .row.
And then columns .col.
Don't ever put a Bootstrap container inside a row.