I am trying to get bootstraps affixed side bar menu to work following the code used in this link. http://www.bootply.com/109952
I have the CSS and the JS in respective files, but when i load the web page, it looks a lot different, and none of the functionality works!!
Am i refernecing the files wrong in my HTML? Do i need to include some other ref, like the Jquery library? If so, how?
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'mainCSS/mainWEBcss.css' %}" type="text/css">
<script type="text/javascript" charset="utf-8" src="{% static 'mainJS/sideBarJS.js' %}"></script>
The rest of the code is the exact same from the web site i copied and pasted from, with the addition on the three lines pasted above. I know my load static files is fine though!
Posting my html below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'mainCSS/mainWEBcss.css' %}" type="text/css">
<script type="text/javascript" charset="utf-8" src="{% static 'mainJS/sideBarJS.js' %}"></script>
</head>
<header class="navbar navbar-bright navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Bootply
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
Get Started
</li>
<li>
Edit
</li>
<li>
Visualize
</li>
<li>
Prototype
</li>
</ul>
</nav>
</div>
</header>
<div id="masthead">
<div class="container">
<div class="row">
<div class="col-md-7">
<h1>Bootply
<p class="lead">The easiest way to apply Bootstrap</p>
</h1>
</div>
<div class="col-md-5">
<div class="well well-lg">
<div class="row">
<div class="col-sm-6">
<img src="//placehold.it/180x100" class="img-responsive">
</div>
<div class="col-sm-6">
<strong>Important</strong>
<p>Blah blah blah blah bla!</p>
</div>
</div>
</div>
</div>
</div>
</div><!-- /cont -->
</div>
<!-- Begin Body -->
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
<li>
Section
<ul class="nav">
<li class="">- Sub 1</li>
<li class="">- Sub 2</li>
</ul>
</li>
<li>
Section 1
<ul class="nav">
<li class="">- Sub 1</li>
<li class="">- Sub 2</li>
<li class="">- Sub 3</li>
</ul>
</li>
<li>Section 2</li>
<li>Section 3</li>
<li>
Section 4
<ul class="nav">
<li class="">- Sub 1</li>
</ul>
</li>
</ul>
</div>
<div class="col-md-9">
<h2 id="sec0">Content</h2>
At Bootply we like to build simple Bootstrap templates that utilize the code Bootstap CSS without a lot of customization. Sure you can
find a lot of Bootstrap themes and inspiration, but these templates tend to be heavy on customization.
<hr>
<div id="sec0a">
This is some mroe content Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae..
</div>
<br><br>
<div id="sec0b">
This is some mroe content Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae..
</div>
<br><br>
<hr class="col-md-12">
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut!
<h2 id="sec1">Content</h2>
<p>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut.
</p>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><h3>Hello.</h3></div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><h3>Hello.</h3></div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
</div>
</div>
<div id="sec1a">
<h4>Section 1 a</h4>
This is some mroe content Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae..
</div>
<br><br>
<div id="sec1b">
<h4>Section 1 b</h4>
This is some mroe content Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae..
</div>
<br><br>
<div id="sec1c">
<h4>Section 1 c</h4>
This is some mroe content Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae..
</div>
<br><br>
<hr>
<h2 id="sec2">Section 2</h2>
<p>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut!
</p>
<div class="row">
<div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
<div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
<div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
</div>
<hr>
<h2 id="sec3">Section 3</h2>
Images are responsive sed #mdo but sum are more fun peratis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
<h2 id="sec4">Section 4</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
<hr>
<h4>Edit on Bootply</h4>
<hr>
</div>
</div>
</div>
<p>This is the header file with bootstraps</p>
<!-- This is start of jinja -->
{% include "loginpage/loginlogic.html" %}
{% block content %}
{% endblock %}
</html>
Related
I link Font Awesome to my page using the Bootstrap CDN.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css"
integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
However when I try to use the classes indicated at the Font Awesome website all I get is a small square where the icon was supposed to be.
Any suggestions on how to fix that?
The html code is shown below.
<section id="services">
<div class="container-fluid services-container">
<div class="row">
<i class="fa-light fa-fire-extinguisher"></i>
<div class="col-lg-3 col-md-6">
<h3 class="text-styling">Συντήρηση Πυροσβεστήρων</h3>
<p class="text-styling">Ut facere voluptatem ea neque tempora sed praesentium magni nam omnis dolor.
In sint consectetur
sit
consectetur molestias qui quidem cumque qui eius sint? Et labore dignissimos eum deleniti
consequatur
sed laborum dolore et adipisci nulla.
</p>
</div>
<div class="col-lg-3 col-md-6">
<h3 class="text-styling">Μελέτες Πυρασφάλειας</h3>
<p class="text-styling">Ut facere voluptatem ea neque tempora sed praesentium magni nam omnis dolor.
In sint consectetur
sit
consectetur molestias qui quidem cumque qui eius sint? Et labore dignissimos eum deleniti
consequatur
sed laborum dolore et adipisci nulla.
</p>
</div>
<div class="col-lg-3 col-md-6">
<h3 class="text-styling">Συστήματα Πυρανίχνευσης</h3>
<p class="text-styling">Ut facere voluptatem ea neque tempora sed praesentium magni nam omnis dolor.
In sint consectetur
sit
consectetur molestias qui quidem cumque qui eius sint? Et labore dignissimos eum deleniti
consequatur
sed laborum dolore et adipisci nulla.
</p>
</div>
<div class="col-lg-3 col-md-6">
<h3 class="text-styling">Πιστοποίηση</h3>
<p class="text-styling">Ut facere voluptatem ea neque tempora sed praesentium magni nam omnis dolor.
In sint consectetur
sit
consectetur molestias qui quidem cumque qui eius sint? Et labore dignissimos eum deleniti
consequatur
sed laborum dolore et adipisci nulla.
</p>
</div>
</div>
</div>
</section>
You need to install Font Awesome, or to get your script via this link : https://fontawesome.com/start .
Enter your email to get started with a free Kit!
Go to confirm your email and they will give you the script
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Bootstrap 4 vertically center text in div
(4 answers)
Closed 3 years ago.
I have a bootstrap row with three columns inside (col-sm-2 ; col-sm-8; col-sm-2).
In the first column in will insert a card, in the second I will insert text and in the last column I will add a tool tip. I will repeat this row a lot of times.
Because I am new to html (and css) I am trying to vertically align the third column. In the image below I am showing and example of what I need highlighted in orange. This is probably a very easy thing to do. Can anyone help? (the code below):
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<div id="panelImage">
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
<div class="col-sm-8">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem
eum fugiat quo voluptas nulla pariatur?</p>
</div>
<div class="col-sm-2">
<p id="thing">Lorem ipsum</p>
</div>
</div>
</body>
And below the css:
#panelImage{
background-color: #dcdcdc;
margin-top: 10px;
margin-right: 10px;
margin-left: 3px;
border-radius: 1px;
border-color: coral;
height: 200px;
padding: 15px;
}
#panelText{
margin-top: 10px;
}
#thing{
top: 50%;
justify-content: center;
}
.wrapper {
display: flex;
align-items: center;
}
<div class="wrapper">
<div class="col-sm-8">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui
in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
<div class="col-sm-2">
<p id="thing">Lorem ipsum</p>
</div>
</div>
you need something like this?
This question already has answers here:
height: 100vh; and overflow "content" on smaller screens
(2 answers)
Closed 4 years ago.
My objective is to create two sections with a full viewport height in the browser. The code beneath works fine on the desktop version, however in mobile the content of section two (3 bootstrap columns with some text ) overlaps section one in mobile. How can I edit my code to stop this overlapping?
body {
color: #FFF;
}
#slide1 {
background-color: grey;
width: 100vw;
height: 100vh;
}
#slide2 {
background-color: blue;
width: 100vw;
height: 100vh;
}
<html lang="es-ES">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<section id="slide1"></section>
<section id="slide2">
<div class=" d-flex align-items-center h-100 align-content-center">
<div class="container ">
<div class="row ">
<div class="col-md-4">
<div class="box p-4">
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel
eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
</div>
<div class="col-md-4">
<div class="box p-4">
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel
eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
</div>
<div class="col-md-4">
<div class="box p-4">
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel
eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Here you can check out the issue:
http://elsecretodigital.com/prueba.html
use min-height instead of height then adjust the centring like below. You may alos remove the width:100vw as it's not needed since your element are by default block element.
body {
color: #FFF;
}
#slide1 {
background-color: grey;
min-height: 100vh;
}
#slide2 {
background-color: blue;
min-height: 100vh;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<section id="slide1"></section>
<section id="slide2" class="d-flex align-items-center align-content-center">
<div class="container ">
<div class="row ">
<div class="col-md-4">
<div class="box p-4">
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
</div>
<div class="col-md-4">
<div class="box p-4">
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
</div>
<div class="col-md-4">
<div class="box p-4">
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I have a simple layout like this:
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
</div>
</div>
Of course there is a lot of content in the divs. But this is the basic layout.
The first div has much more content so is longer in heigth.
How do I get them to be equal.
I've been pouring over this for hours and I cannot fix.
I see .row-eq-height in many threads but I cannot get to work.
Is flexbox part of bootstrap 4? I am only on 3 because 4 is not approved for us.
You can assign the height of the first div to the second div using JavaScript.
<div class="row" id="d1">
<div class="col-xs-6" style="background-color:gold">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
<div class="col-xs-6" style="background-color:red" id="d2">
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the ...
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$("document").ready(function() {
$("div#d2").height($("div#d1").height());
});
</script>
Using this CSS accordion which works in every browser except google chrome on IOS.
JS Fiddle
Knowing that its not simple to debug chrome on IOS, does anyone have a solution or fix to get the accordion working again.
HTML
<section id="accordion">
<div>
<input id="check-1" type="checkbox" href="check-1" />
<label for="check-1">1914 translation by H. Rackham</label>
<article>
<p>
<div class="row">
<div class="one-half column">
<img class="alignright" src="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg" alt="module 1">
</div>
<div class="one-half column">
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
</div>
</p>
</article>
</div>
<div>
<input id="check-2" type="checkbox" />
<label for="check-2"> <strong>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</strong>
<small>(click for more details)</small>
</label>
<article>
<p>
<div class="row">
<div class="one-half column">
<img class="alignright" src="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg" alt="module 2">
</div>
<div class="one-half column">
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
</div>
</p>
</article>
</div>
CSS included in JS Fiddle link.
Thanks