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>
Related
<div class="box-2">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 img-height-1" style="">
<div class="img-height-1" style="">
<img src="./assets/images/a.png" width="100%" alt="">
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 img-height-2 mt-sm-0 mt-3" style="">
<div class="img-height-2" style="">
<img src="./assets/images/m.png" width="100%" alt="">
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 img-height-3 mt-lg-0 mt-3" style="">
<div class="img-height-3" style="">
<img src="./assets/images/Rose.png" width="100%" alt="">
</div>
</div>
<div class="col-8 content-1" style="">
<div class="box-3 ">
<h2>Dr.Mahaganapathy Dass</h2>
<h6>Cheif Executive Officer</h6>
<p class="pt-5">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, voluptatem! Autem a iste ut id maiores impedit reprehenderit assumenda, quaerat obcaecati perspiciatis blanditiis officia veniam? Corporis a eveniet nulla. Voluptatum fugit recusandae ratione corrupti odio, repudiandae sapiente sed vel inventore earum ad. Totam nihil repellendus, aliquam eum nam distinctio quasi velit quisquam commodi odit culpa voluptate perspiciatis mollitia in porro? Aliquid quas quibusdam laboriosam labore, minima consectetur itaque eveniet amet, nihil at aperiam. Enim magnam eaque rerum soluta repudiandae cupiditate ratione doloribus fugiat, alias pariatur ullam veniam eius autem aspernatur, sed nesciunt voluptatibus quod excepturi sequi perspiciatis deleniti consequuntur! Aliquam!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia alias veritatis quos maxime sunt soluta accusamus nulla ratione repellat corrupti molestiae, nostrum eligendi, facilis dolorum perferendis ad non unde odio neque. Nihil quia exercitationem animi libero praesentium voluptas placeat suscipit, consequatur molestiae quis minima natus doloribus quidem autem quam veniam?
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse cupiditate alias cum hic dicta at corrupti? Rerum facilis in aspernatur cupiditate consequatur maiores odit repudiandae, consequuntur sequi eaque minus inventore!
</p>
</div>
</div>
<div class="col-8 content-2" style="">
<div class="box-3 ">
<h2>Dr.Mahaganapathy Dass</h2>
<h6>Cheif Executive Officer</h6>
<p class="pt-5">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, voluptatem! Autem a iste ut id maiores impedit reprehenderit assumenda, quaerat obcaecati perspiciatis blanditiis officia veniam? Corporis a eveniet nulla. Voluptatum fugit recusandae ratione corrupti odio, repudiandae sapiente sed vel inventore earum ad. Totam nihil repellendus, aliquam eum nam distinctio quasi velit quisquam commodi odit culpa voluptate perspiciatis mollitia in porro? Aliquid quas quibusdam laboriosam labore, minima consectetur itaque eveniet amet, nihil at aperiam. Enim magnam eaque rerum soluta repudiandae cupiditate ratione doloribus fugiat, alias pariatur ullam veniam eius autem aspernatur, sed nesciunt voluptatibus quod excepturi sequi perspiciatis deleniti consequuntur! Aliquam!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia alias veritatis quos maxime sunt soluta accusamus nulla ratione repellat corrupti molestiae, nostrum eligendi, facilis dolorum perferendis ad non unde odio neque. Nihil quia exercitationem animi libero praesentium voluptas placeat suscipit, consequatur molestiae quis minima natus doloribus quidem autem quam veniam?
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse cupiditate alias cum hic dicta at corrupti? Rerum facilis in aspernatur cupiditate consequatur maiores odit repudiandae, consequuntur sequi eaque minus inventore!
</p>
</div>
</div>
<div class="col-8 content-3" style="">
<div class="box-3 ">
<h2>Dr.Mahaganapathy Dass</h2>
<h6>Cheif Executive Officer</h6>
<p class="pt-5">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, voluptatem! Autem a iste ut id maiores impedit reprehenderit assumenda, quaerat obcaecati perspiciatis blanditiis officia veniam? Corporis a eveniet nulla. Voluptatum fugit recusandae ratione corrupti odio, repudiandae sapiente sed vel inventore earum ad. Totam nihil repellendus, aliquam eum nam distinctio quasi velit quisquam commodi odit culpa voluptate perspiciatis mollitia in porro? Aliquid quas quibusdam laboriosam labore, minima consectetur itaque eveniet amet, nihil at aperiam. Enim magnam eaque rerum soluta repudiandae cupiditate ratione doloribus fugiat, alias pariatur ullam veniam eius autem aspernatur, sed nesciunt voluptatibus quod excepturi sequi perspiciatis deleniti consequuntur! Aliquam!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia alias veritatis quos maxime sunt soluta accusamus nulla ratione repellat corrupti molestiae, nostrum eligendi, facilis dolorum perferendis ad non unde odio neque. Nihil quia exercitationem animi libero praesentium voluptas placeat suscipit, consequatur molestiae quis minima natus doloribus quidem autem quam veniam?
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse cupiditate alias cum hic dicta at corrupti? Rerum facilis in aspernatur cupiditate consequatur maiores odit repudiandae, consequuntur sequi eaque minus inventore!
</p>
</div>
</div>
</div>
</div>
On hover first image other 2 image hide and content slide up, On first hover on image other 2 images hide and content comes up with animation, the process go on for other images also on hover,On hover first image other 2 image hide and content slide up, On first hover on image other 2 images hide and content comes up with animation, the process go on for other images also on hover
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// Content-1 Img-1
$(document).ready(function(){
// Image show/Hide
$('.img-height-1').hover(function(){
$('.img-height-2, .img-height-3').css('display','none');
// content show
$('.content-1').css('display','block');
},function(){
$('.img-height-2, .img-height-3').css('display', '');
// content show
$('.content-1').css('display', '');
} );
// Image show/Hide
$('.img-height-2').hover(function(){
$('.img-height-1, .img-height-3').css('display','none');
// content show
$('.content-2').css('display','block');
},function(){
$('.img-height-1, .img-height-3').css('display', '');
// content show
$('.content-2').css('display', '');
} );
// Image show/Hide
$('.img-height-3').hover(function(){
$('.img-height-2, .img-height-1').css('display','none');
// content show
$('.content-3').css('display','block');
},function(){
$('.img-height-2, .img-height-1').css('display', '');
// content show
$('.content-3').css('display', '');
} );
})</script>
Please visit this site and make sure that you are looking for same type of css hover effect on image at the middle of the page have.
https://ecommerce-project-eight.vercel.app/
Then I will let you know which code I have used.
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 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.
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.
I would like to know how I can avoid the big whitespace using float: left, all the block does not have the same height
here's a demo
<div class="container">
<div class="block">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, molestias vel quia ratione a nostrum quae provident facere perspiciatis commodi!</div>
</div>
<div class="block">
<div class="content">Est, eaque, enim? Illo, incidunt, molestias aut expedita aspernatur consectetur quos sit accusantium hic mollitia beatae numquam itaque excepturi eaque.</div>
</div>
<div class="block">
<div class="content">Nihil, quibusdam animi voluptatum modi pariatur aliquam adipisci nostrum placeat eos atque maxime odit optio molestias nisi dignissimos. Cum, vel?</div>
</div>
<div class="block">
<div class="content">Tempore, adipisci voluptatibus iure temporibus aut hic deleniti inventore accusantium excepturi vel et omnis veritatis itaque nesciunt odit ut nemo?</div>
</div>
<div class="block">
<div class="content">Voluptas, dignissimos, reiciendis, rem quasi neque quia molestiae in consequatur animi at et qui sint nihil ipsum corrupti totam repudiandae?</div>
</div>
<div class="block">
<div class="content">Tempora, velit, incidunt a est sed nostrum optio suscipit in sint eveniet architecto pariatur culpa asperiores minus praesentium perspiciatis dignissimos.</div>
</div>
<div class="block" style="height:200px"><!-- this height is for example, the height can be higher or lower -->
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, enim, quidem laudantium quo iusto deleniti sed assumenda placeat dolorem est?</div>
</div>
<div class="block">
<div class="content">Earum, ut, laudantium, eaque, quaerat architecto officiis magni iusto eum nesciunt asperiores illum sit. Et officiis modi tempore mollitia sunt.</div>
</div>
<div class="block">
<div class="content">Nobis, placeat, tenetur tempore facere reiciendis illo reprehenderit sunt a ratione hic deleniti quaerat fuga ex minus eum culpa laborum.</div>
</div>
<div class="block">
<div class="content">Qui, nostrum, ab, totam, molestias quaerat expedita saepe odit accusamus reiciendis rerum officia provident iusto voluptate quis quos sit nisi.</div>
</div>
<div class="block">
<div class="content">Eum, dolorem, qui, autem dolorum et molestiae asperiores rerum eius minus iste quaerat labore distinctio vel cum quis atque consequatur.</div>
</div>
<div class="block">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure est magni necessitatibus consequatur deleniti aut veniam repellat quis similique ab.</div>
</div>
<div class="clear"></div>
</div>
Style.css
body {color:white;}
.clear{clear: both;}
.block {float:left;width: 50%;height:100px;}
.content {margin: 10px; padding: 10px; background-color: #000;}
Using regular css you can't really avoid the whitespace underneath each of your elements.
The only way to do it with css would be to have all of your content arranged in columns, not all actually floated left.
Most people get around this problem by using a plugin such as http://masonry.desandro.com/ which uses jQuery/JavaScript to make it work.
Hope that helps.