I want to make sure that only the card-body block scrolls. Now the page scrolls a bit when the card-body block overflows (there are 2 scroll bars). The lorem text was inserted for an overflow example.
The result should be as in the picture. The crossed-out scroll bar should be removed, and the ticked one should remain
enter image description here
html, body {
height: 100%;
}
.ts_panel {
height: 100%;
border-right: 2px solid #646464;
background: rgb(44,44,44);
}
.ts_usernameInp {
width: 40%;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container-fluid d-flex h-100 flex-column">
<header class="row justify-content-center align-items-center bg-dark text-white text-center py-2">
<span>Ссылка для подключения к чату: 127.0.0.1:8000/chat/?chat_id=tZGuDGqdHa0e3IAfTRY7</span>
</header>
<div class="row h-100">
<div class="col-2 ts_panel">
<h1 class="text-center text-white">Чат</h1>
</div>
<div class="col-10 p-0 h-100">
<div class="card w-100 h-100">
<form class="h-100" action="" method="post">
<div class="d-flex flex-column h-100">
<div class="card-header flex-fill text-center">
<input type="text" class="form-control ts_usernameInp" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="card-body flex-fill overflow-auto">
Obcaecati dolor quam voluptate praesentium quaerat et maxime provident tempora alias suscipit facere est, laborum ad aperiam quas animi corporis neque delectus nostrum hic nisi! Omnis, ea atque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, nam expedita fugiat aperiam, ad corporis voluptatem laudantium assumenda deleniti, cum quasi voluptatibus. Beatae cum ratione debitis expedita ducimus veritatis suscipit, quod aperiam magni nihil ab voluptas dolorum eaque? At necessitatibus tempora enim, quisquam possimus ipsa provident fugiat quaerat nobis. Delectus aliquam porro beatae rerum eligendi distinctio ab voluptatem vero dignissimos neque in itaque maiores nostrum aspernatur excepturi, minima totam magni nesciunt blanditiis, accusamus hic consequatur! Sint eveniet error optio corrupti dicta dolores reprehenderit quas molestiae, saepe exercitationem culpa commodi doloremque cum rem quod sit accusamus enim alias. Quod dolore veritatis a magni, dolor cum quo libero enim reprehenderit, aut ex, nobis et possimus reiciendis dolorem. Quae, fugit quasi! Voluptatum saepe numquam quam, nobis sint ipsam maiores sunt? Eius ab quasi aut ullam aliquam architecto, placeat optio dolorum cumque odio dolorem recusandae explicabo cum. Consequuntur odit a illum tenetur illo exercitationem architecto soluta corrupti, temporibus voluptate consequatur maxime impedit praesentium quisquam eius dolorem. Aspernatur, neque tenetur corporis inventore quisquam aliquid perferendis eaque doloremque. Laborum laboriosam magnam alias nam blanditiis temporibus omnis dolor, quae sint modi officiis earum possimus voluptatibus. Molestiae nihil debitis repellat provident officiis sint quaerat aliquam eos eum accusantium aliquid, quam exercitationem nesciunt dolorum, sunt maxime. Consequatur consectetur sunt explicabo aperiam ipsam eaque labore obcaecati cupiditate. A ut culpa similique ipsam illo ducimus placeat id eligendi officia nulla beatae quasi sunt cum rem, consequatur nisi nam ab? Impedit cum assumenda reprehenderit consectetur?
</div>
<div class="flex-fill card-footer">
<div class="input-group">
<input type="text" class="form-control" placeholder="Введите сообщение" aria-label="Сообщение" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">Отправить</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Okay, you must use this for block scrolling bars overflow-y: hidden; overflow-x: hidden; but you must make Mobile optimalization use https://www.w3schools.com/cssref/css3_pr_mediaquery.asp and add the new css and done fixed.
html, body {
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
if you need still help, make comment i help you.
Related
The requirement is to make the div with class ".container" scrollable. The other divs should render as per the specified height. At present this content creates a scroll at body level.
Also flex display related answer is preferred over display as grid ones.
.box .row {
border: 1px dotted grey;
}
.container {
height: 100%;
overflow-y: auto;
}
<head>
</head>
<body>
<div class="box">
<div class="row header" style="height:200px">
<div>header</div>
<span>sized to content</span>
</div>
<div class="row content">
<div>
<span style="height:50px">content</span> (fills remaining space)
<div class="container">
<div style="width:100%;height:700px;background-color:green"> </div>
</div>
</div>
</div>
</div>
</body>
Update: The snippet is updated to elaborate that height or overflow set to the container does not work right. Tried it in my laptop with 1920 x 1080 resolution in chrome, there are two scrolls, one from the outer body too. Need just a single scroll on the container which would work as responsive for multiple resolutions.
According to the comments I found in answers, I suggested this solution using CSS calc() function:
:root {
/* set the height of other elements here */
--fixHeight: 250px;
}
.box .row {
border: 1px dotted grey;
}
.container {
height: calc(100vh - var(--fixHeight));
background-color: green
}
.container>div {
width: 100%;
height: 100%;
border: solid 3px red;
/* maybe overflow-y: auto; also works */
overflow-y: scroll;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="row header" style="height:200px">
<div>header</div>
<span>sized to content</span>
</div>
<div class="row content">
<div>
<span style="height:50px">content</span> (fills remaining space)
<div class="container">
<div>
some div contents
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur delectus deleniti, dignissimos distinctio ducimus ea est facilis illo inventore iste laudantium nemo nostrum optio quaerat quos, repellat repellendus temporibus totam ullam unde ut veniam vitae. Aut consequuntur dolore, enim excepturi minus, nisi quisquam ratione sit suscipit ullam velit, vitae voluptates. A alias amet, asperiores delectus eius eos est ex, facere in ipsam laudantium nostrum optio possimus quas quo quos repellendus sunt, suscipit voluptate voluptatibus. Ad aliquam, consequatur consequuntur delectus, dolores ducimus eligendi eum facilis iste libero mollitia natus officiis optio pariatur quaerat repellendus repudiandae, sunt vel. Aliquam aperiam at, atque blanditiis consectetur culpa deleniti dignissimos dolorem, doloremque dolorum ducimus ea earum esse eum excepturi facere inventore ipsam ipsum, iure labore libero nam neque nesciunt nobis numquam omnis possimus provident quam ratione reiciendis sapiente similique sit soluta suscipit tempora vel voluptates! Adipisci, alias aliquid architecto consequatur cupiditate dignissimos doloremque, et facere illo ipsa nam, neque nostrum officiis placeat provident quidem quis repellat sapiente sint voluptas! Architecto aspernatur consectetur culpa cumque cupiditate dicta, dignissimos dolor doloremque ducimus error expedita fugiat fugit inventore itaque laboriosam molestias odio omnis optio repudiandae sequi sunt suscipit vel, velit veritatis voluptatibus? Commodi consequuntur debitis ex, modi nemo nihil nostrum sequi! Animi dolores eos error esse facilis nam nemo saepe sequi suscipit veritatis! Accusamus alias aperiam at cumque, debitis dignissimos hic libero magni maxime mollitia natus ratione sequi velit veniam vero! Ab animi asperiores beatae cupiditate dignissimos dolores ea eius eum hic id impedit inventore, libero magnam maxime minima molestias nam nemo nobis nulla placeat quae reprehenderit temporibus voluptatem! At autem commodi consectetur corporis, delectus dolore earum fuga molestiae nobis, omnis placeat, qui totam ullam. A adipisci aliquid aperiam beatae corporis cupiditate deleniti dignissimos dolorem dolorum fuga fugiat id in itaque maiores modi necessitatibus neque nobis odio omnis optio pariatur perferendis perspiciatis praesentium quaerat qui, quia quo recusandae rem repellendus repudiandae temporibus ullam unde voluptatibus. Dignissimos dolorum ducimus eaque eum? Accusantium corporis ducimus ex hic, molestias neque nulla optio rerum sapiente. Assumenda consectetur consequuntur ducimus expedita, harum, ipsum iusto minima necessitatibus nesciunt numquam officia perferendis quasi rerum, vel vero! Aliquam cum eligendi enim error explicabo harum numquam quas quis saepe sapiente similique unde ut velit voluptate, voluptates? Accusamus asperiores cum delectus deleniti dignissimos dolor enim, explicabo facere facilis illum ipsam laudantium magnam magni maiores molestiae necessitatibus neque numquam obcaecati odio officiis omnis optio praesentium quas quidem quo recusandae, reiciendis repellat, reprehenderit rerum sequi totam ullam vel voluptates. Accusamus commodi cupiditate deleniti eius fugiat fugit natus sequi temporibus, voluptatibus? A accusamus ad alias atque blanditiis commodi consequatur cum debitis deserunt enim exercitationem, expedita hic ipsam, libero minima minus molestiae mollitia possimus quis quos saepe, sunt vel velit voluptates voluptatibus!
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Also if you want to be more dynamic (means that the height of other elements are calculated automatically) you can set a class called wrapper to every other element you want to calculate its height and then use the JavaScript code like below:
let allOthers = document.querySelectorAll(".wrapper");
let containerElem = document.querySelector(".container");
let allHeights = 0;
allOthers.forEach(function (element, index) {
let elemHeight = getComputedStyle(element).height;
allHeights += parseFloat( elemHeight );
});
console.log(allHeights);
let containerHeight = "calc(100vh - " + allHeights + "px)";
containerElem.style.height = containerHeight;
.header {
height: 250px;
}
.box .row {
border: 1px dotted grey;
}
.container {
background-color: green
}
.container>div {
width: 100%;
height: 100%;
border: solid 3px red;
overflow-y: auto;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="row header wrapper">
<div>header</div>
<span>sized to content</span>
</div>
<div class="row content">
<div>
<span style="height:50px" class="wrapper">content</span> (fills remaining space)
<div class="container">
<div>
some div contents
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur delectus deleniti, dignissimos distinctio ducimus ea est facilis illo inventore iste laudantium nemo nostrum optio quaerat quos, repellat repellendus temporibus totam ullam unde ut veniam vitae. Aut consequuntur dolore, enim excepturi minus, nisi quisquam ratione sit suscipit ullam velit, vitae voluptates. A alias amet, asperiores delectus eius eos est ex, facere in ipsam laudantium nostrum optio possimus quas quo quos repellendus sunt, suscipit voluptate voluptatibus. Ad aliquam, consequatur consequuntur delectus, dolores ducimus eligendi eum facilis iste libero mollitia natus officiis optio pariatur quaerat repellendus repudiandae, sunt vel. Aliquam aperiam at, atque blanditiis consectetur culpa deleniti dignissimos dolorem, doloremque dolorum ducimus ea earum esse eum excepturi facere inventore ipsam ipsum, iure labore libero nam neque nesciunt nobis numquam omnis possimus provident quam ratione reiciendis sapiente similique sit soluta suscipit tempora vel voluptates! Adipisci, alias aliquid architecto consequatur cupiditate dignissimos doloremque, et facere illo ipsa nam, neque nostrum officiis placeat provident quidem quis repellat sapiente sint voluptas! Architecto aspernatur consectetur culpa cumque cupiditate dicta, dignissimos dolor doloremque ducimus error expedita fugiat fugit inventore itaque laboriosam molestias odio omnis optio repudiandae sequi sunt suscipit vel, velit veritatis voluptatibus? Commodi consequuntur debitis ex, modi nemo nihil nostrum sequi! Animi dolores eos error esse facilis nam nemo saepe sequi suscipit veritatis! Accusamus alias aperiam at cumque, debitis dignissimos hic libero magni maxime mollitia natus ratione sequi velit veniam vero! Ab animi asperiores beatae cupiditate dignissimos dolores ea eius eum hic id impedit inventore, libero magnam maxime minima molestias nam nemo nobis nulla placeat quae reprehenderit temporibus voluptatem! At autem commodi consectetur corporis, delectus dolore earum fuga molestiae nobis, omnis placeat, qui totam ullam. A adipisci aliquid aperiam beatae corporis cupiditate deleniti dignissimos dolorem dolorum fuga fugiat id in itaque maiores modi necessitatibus neque nobis odio omnis optio pariatur perferendis perspiciatis praesentium quaerat qui, quia quo recusandae rem repellendus repudiandae temporibus ullam unde voluptatibus. Dignissimos dolorum ducimus eaque eum? Accusantium corporis ducimus ex hic,
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You have to set height to your parent container. Px or any property. Then set overflow auto
You have to nest an element with height: 100%; into an element with a fixed or restricted height. Then you can set overflow-y: scroll; on the element with the height: 100%; which will contain all of your content.
I added some content to demonstrate the behavior.
.box .row {
border: 1px dotted grey;
}
.container {
height: 78.5vh;
max-width: 100;
background-color: green;
border: solid 10px red;
}
.header {
height: 20vh;
}
.content {
min-height: 80vh;
}
.container>div {
max-width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
body {
margin: 0;
overflow-y: hidden;
}
body,
.box {
max-height: 100vh;
}
<head>
</head>
<body>
<div class="box">
<div class="row header">
<div>header</div>
<span>sized to content</span>
</div>
<div class="row content">
<div class="container">
<div><span>content</span> (fills remaining space)<br>NOW<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>WE<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>CAN<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>SCROLL<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
</div>
</div>
</div>
</body>
I would like to put an image behind a card and make it responsive
Quite useless to share my code because i really don't know where to go with this problem.
I already tried to put the img in a :after or :before but i could't manage to make it not break the display:flex of the card container, i tried to put it in the card using z-index but it creates a blank space before the text.
So i tried to schematize what i would like to do, thanks a lot! :)
Ugly drawing of what i want :D
you can use position relative to the parent and position absolute to the image which you want to place behind and adjust the top and bottom values
Codepen
.main-row>div{
background-color: #ffd5ff;
border-radius: 24px;
}
.main-row p::first-letter {
color: red;
font-size: xx-large;
}
.main-row .smily {
position:absolute;
top:-35px;
left:-35px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
<div class="row main-row d-flex text-justify mt-5 d-flex justify-content-between position-relative">
<img src="https://pngimg.com/uploads/smiley/smiley_PNG155.png" style="height:60px; width:auto;" class="smily">
<div class="col-lg-3 para1 p-4 shadow mb-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, rem ratione deserunt necessitatibus ducimus excepturi quisquam hic, eum esse dignissimos laboriosam assumenda sapiente voluptas fugiat nulla inventore repellat consequuntur quasi?
Soluta mollitia voluptatibus molestiae, magnam rerum accusamus veritatis minima totam veniam! Incidunt ratione cupiditate quia aspernatur excepturi sit dolorum, fugit harum officia hic quam beatae itaque pariatur atque! Deserunt, provident.</p></div>
<div class="col-lg-3 para2 p-4 shadow mb-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, rem ratione deserunt necessitatibus ducimus excepturi quisquam hic, eum esse dignissimos laboriosam assumenda sapiente voluptas fugiat nulla inventore repellat consequuntur quasi?
Soluta mollitia voluptatibus molestiae, magnam rerum accusamus veritatis minima totam veniam! Incidunt ratione cupiditate quia aspernatur excepturi sit dolorum, fugit harum officia hic quam beatae itaque pariatur atque! Deserunt, provident.</p></div>
<div class="col-lg-3 para3 p-4 shadow mb-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, rem ratione deserunt necessitatibus ducimus excepturi quisquam hic, eum esse dignissimos laboriosam assumenda sapiente voluptas fugiat nulla inventore repellat consequuntur quasi?
Soluta mollitia voluptatibus molestiae, magnam rerum accusamus veritatis minima totam veniam! Incidunt ratione cupiditate quia aspernatur excepturi sit dolorum, fugit harum officia hic quam beatae itaque pariatur atque! Deserunt, provident.</p></div>
</div>
<div class="row">
<a class="mx-auto mt-4" href="https://www.neramclasses.com"><strong>show some love by adding this link to your website as a credit</strong></a></div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
'
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.
the text inside div is going outside, I don't know how to fix it. I've tried the way of putting columns in the order like shown in my code from here:
How can I get a Bootstrap column to span multiple rows?
An Image used as a template
How the page looks like
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About us</title>
<!-- versioning can often help (href="css/style.css?ver=2.0") -->
<!-- BOOTSTRAP 4 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<style>
body {
background-color: #696969;
margin-top: 100px;
}
.well {
background-color: #deedee;
margin: 3px;
}
</style>
</head>
<body>
<div class="container-fluid text-center">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
<div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, molestiae saepe! Facilis quidem dolorem temporibus mollitia doloremque, possimus voluptas error aperiam iusto repellendus numquam, laudantium nemo a, debitis nam eveniet repellat rem voluptates culpa iure nisi quae asperiores nulla molestiae consequatur. Facilis quos soluta necessitatibus, excepturi libero. Veritatis impedit expedita architecto assumenda quo cum earum reprehenderit ad reiciendis, explicabo consequatur, iste facilis vel esse nesciunt nihil animi minima eum accusantium eveniet nam. Dolor quas voluptates, officiis numquam corporis quos. Doloribus nisi maiores placeat quas minima, autem numquam natus totam quidem nostrum, quos vel illo magnam blanditiis quam eligendi sed voluptates.</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, molestiae saepe! Facilis quidem dolorem temporibus mollitia doloremque, possimus voluptas error aperiam iusto repellendus numquam, laudantium nemo a, debitis nam eveniet repellat rem voluptates culpa iure nisi quae asperiores nulla molestiae consequatur. Facilis quos soluta necessitatibus, excepturi libero. Veritatis impedit expedita architecto assumenda quo cum earum reprehenderit ad reiciendis, explicabo consequatur, iste facilis vel esse nesciunt nihil animi minima eum accusantium eveniet nam. Dolor quas voluptates, officiis numquam corporis quos. Doloribus nisi maiores placeat quas minima, autem numquam natus totam quidem nostrum, quos vel illo magnam blanditiis quam eligendi sed voluptates.</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, molestiae saepe! Facilis quidem dolorem temporibus mollitia doloremque, possimus voluptas error aperiam iusto repellendus numquam, laudantium nemo a, debitis nam eveniet repellat rem voluptates culpa iure nisi quae asperiores nulla molestiae consequatur. Facilis quos soluta necessitatibus, excepturi libero. Veritatis impedit expedita architecto assumenda quo cum earum reprehenderit ad reiciendis, explicabo consequatur, iste facilis vel esse nesciunt nihil animi minima eum accusantium eveniet nam. Dolor quas voluptates, officiis numquam corporis quos. Doloribus nisi maiores placeat quas minima, autem numquam natus totam quidem nostrum, quos vel illo magnam blanditiis quam eligendi sed voluptates.</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="well m-0">
<div class="row">
<div class="col-md-7">
Jan Kustra
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="col-md-5">
<img src="img/300.png" alt="my face" width="50%" class="float-right">
</div>
</div>
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni similique, suscipit laudantium, error explicabo repellat aperiam, ullam ab non exercitationem vitae, totam quidem eaque labore. Totam neque eaque architecto facilis, unde laudantium quas. Id vel, unde error, fugiat vero ipsa dicta doloribus mollitia ea et eaque incidunt esse. Aliquid ipsa perspiciatis reiciendis, eligendi dolorum architecto, voluptatum, consectetur similique ex quo ad nam, itaque officiis id porro ducimus doloremque reprehenderit. Inventore vel rem voluptatem ullam ab itaque harum rerum, ut hic modi facilis minus quibusdam, veniam quam ipsum. At maiores tenetur, natus illo repudiandae velit, similique harum accusantium voluptatum, quia quas!</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
You're missing the column surrounding the text block.
Yours:
<div class="row">
<p>Lorem ipsum...</p>
</div>
Correct:
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum...</p>
</div>
</div>
I am trying to have a bar sit at the bottom of the users screen, but only within a column. I can use position:fixed; bottom:0; if I want the element to stretch across the entire screen, but I can't figure out how to make the bar stay within the column. See picture for example
In the above picture, I want the Like, Comment, Share box to always be at the bottom of the users screen, but stay within the column it's in.
I'm using bootstrap 4, and you can see the website here: https://www.arelplane.com/#arelenglish
EDIT:
HTML of page
<div class='container-fluid user-profile'>
<div class='row'>
<div class='col-md-3 col-12 d-none d-md-block remove-lr-padding' id='sticky-sidebar'>
<div class='row mt-5 mb-5 align-center'>
<div class="col-12">
Some text
</div>
</div>
<div class="row social-module">
<div class="col-4">
Like
</div>
<div class="col-4">
Comment
</div>
<div class="col-4">
Share
</div>
</div>
</div>
<div class='col-md-9 col-12 remove-lr-padding' id='user-map'>
<div class="user-map" id="cesiumContainer"></div>
</div>
</div>
</div>
CSS
.social-module {
background-color: blue;
// position:fixed;
bottom:0;
width: 100%;
margin-left: 0;
margin-right: 0;
}
Edit 2:
Fiddle: https://jsfiddle.net/arel/9t3tnhzt/3/
This is how you make the bar stay at the bottom of the column:
<div class="d-flex align-items-end">...</div>
Alternatively, add the align-items-end class to that column.
No need for custom css in Bootstrap 4.
Here's a working example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="container-fluid user-profile">
<div class="row">
<div class="col-4 remove-lr-padding" id="sticky-sidebar">
<div class="row text-center">
<div class="col-12 bg-warning" style="min-height: 100vh;">
<p>Feature requests? Questions?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate temporibus assumenda molestias laborum ipsam quisquam, nisi, aspernatur quia, ratione ipsum illo cum exercitationem nostrum dolor corrupti ducimus sunt provident harum. Eum, ullam id! Adipisci perspiciatis reiciendis minus quisquam culpa nobis voluptatem suscipit iusto dolores hic ab impedit incidunt rem labore praesentium, sed itaque voluptates distinctio vero temporibus quia atque magni ratione. Ratione, sit maiores asperiores architecto deserunt ducimus dignissimos? Error doloremque reiciendis repellendus esse dolor at expedita non. Ipsum maxime optio quasi, ratione pariatur excepturi aperiam. Dolores nisi magni est suscipit placeat nobis quaerat fugit culpa laboriosam, quam autem aut nesciunt fuga reiciendis dolor omnis doloremque ab corporis dicta adipisci eos amet ipsa. Qui beatae possimus pariatur nemo ducimus autem, architecto officia libero nisi quo, a earum repellendus explicabo cumque quidem consequatur sapiente ipsam molestias molestiae, nostrum sed nesciunt neque. Ex accusantium inventore quam! Commodi tempora eligendi possimus nam ut similique quidem, rem enim, quo quisquam autem accusantium! Suscipit error a quidem adipisci. Repellat maxime nesciunt id quasi deleniti, consectetur, est eius commodi doloremque odit, fugiat! Consequatur modi distinctio reiciendis natus et quibusdam eum doloribus temporibus delectus obcaecati laboriosam earum, ad eveniet! Ea, necessitatibus perferendis, nostrum aperiam saepe voluptates reiciendis odit, quis porro ipsa omnis ab iste doloribus, cupiditate nobis eos enim cum molestias facilis laudantium ex. Hic at impedit in alias.</p>
</div>
<div class="row social-module position-sticky fixed-bottom m-0 w-100 py-2 bg-primary">
<div class="col-12 col-md-4">
Like
</div>
<div class="col-12 col-md-4">
Cmnt
</div>
<div class="col-12 col-md-4">
Share
</div>
</div>
</div>
</div>
<div class="col-8 remove-lr-padding" id="user-map">
hello
</div>
</div>
</div>
I just added the h-100 class to the row and then added the position-sticky class to the other row.
Oh, and I ripped out your margins. :-)