I am trying to do my very first own web app with Spring, Thymeleaf and everything seemed to be going well, however after I separated my html files in "templates" folder, since that is required to use thymeleaf, my bootstrap,JS,CSS and all my other resources stopped working.
I have my boostrap included with CDN with the css included in the header and JS,jQuery and popper included in the bottom of the body. I've tried moving the CDN links all in the header, removing my own js and css, however it didn't work.
You can review the html below:
<!doctype html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>EventFinder</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand">eventfinder</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="#navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Organize an event</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Register</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="slides" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../static/images/music.jpg" class="d-block w-100" alt="Music events">
</div>
<div class="carousel-item">
<img src="../static/images/arts.jpg" class="d-block w-100" alt="Art events">
</div>
<div class="carousel-item">
<img src="../static/images/travel.jpg" class="d-block w-100" alt="Travel and outdoor events">
</div>
<div class="carousel-item">
<img src="../static/images/hobbies.jpg" class="d-block w-100" alt="Hobbies">
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Welcome to eventfinder.</h1>
</div>
<hr>
<div class="col-12">
<p class="lead">Here you can search, join and create all kind of events. Eventfinder is free of charge web app, where people with the same
interests can match and meet in real life.</p>
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row container-fluid padding">
<div class="person_container col-12 col-sm-6 col-md-4">
<div class="img-area">
<img src="../static/images/person1.jpg" class="img-thumbnail person_pic">
</div>
<p>Some text here</p>
</div>
<div class="person_container col-12 col-sm-6 col-md-4">
<div class="img-area">
<img src="../static/images/person2.jpg" class="img-thumbnail person_pic">
</div>
<p>Some text here</p>
</div>
<div class="person_container col-12 col-md-4">
<div class="img-area">
<img src="../static/images/person3.jpg" class="img-thumbnail person_pic">
</div>
<p>Some text here</p>
</div>
</div>
<hr class="my-4">
</div>
<div class="my-div-body">
<div class="row container-fluid">
<div class="col">
Most recently added events
</div>
</div>
<div class="row recently-added-container container-fluid">
<div class="col">
TO ADD EVENT HERE
</div>
<div class="col">
TO ADD EVENT HERE
</div>
<div class="col">
TO ADD EVENT HERE
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Best cities to visit</h1>
</div>
<hr>
<div class="container-fluid padding">
<div class="row padding">
<div class="col-md-4">
<div class="card">
<img class="city-img-top" src=""/>
<div class="card-body">
<h4 class="card-title">City Name</h4>
<p class="card-text">Some text here</p>
See more
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="city-img-top" src=""/>
<div class="card-body">
<h4 class="card-title">City Name</h4>
<p class="card-text">Some text here</p>
See more
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="city-img-top" src=""/>
<div class="card-body">
<h4 class="card-title">City Name</h4>
<p class="card-text">Some text here</p>
See more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="../static/js/app.js"></script>
</body>
</html>
Also you can check my project structure here:
Thank you in advance!
It's best to let thymeleaf handle paths for resources and not use relative ones.
For example set the folowing properties
spring:
web:
resources:
static-locations: classpath:/static/
chain:
strategy:
content:
enabled: true
paths: /resources/**
and then in the html do
<link rel="stylesheet" th:href="#{/css/style.css}"> and
<img th:src="#{/images/person3.jpg}" class="img-thumbnail person_pic">
This way you do not have to add an arbitrary amount of ../ to paths
Related
I have a two-column layout with one element on the left and two on the right.
How can I keep the last element inside the right column aligned relatively to the bottom of the left column?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Bare - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-7">
<div class="card card-block">
<h3>Column 1</h3>
<br />
<br />
<br />
<p>..end of content</p>
</div>
</div>
<div class="col-5">
<div class="row no-gutters">
<div class="col-12">
<div class="card card-block">
<h3>Column 2</h3>
</div>
</div>
<div class="col-12 align-self-end">
<div class="card card-block">
<h3>Column 3</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Thank you for your help!
By adding the .align-items-end to the parent row, it vertically aligns the columns to bottom of it.
If you want to have the column number 3 on the top but preserve the current position of column 4, I would suggest for you to take a look in to a jQuery library called eqHeight. This would allow you to stretch the parent columns (col-7 and col-5) to same height, after which the column number 3 should be on top with column 1.
<!-- Page Content -->
<div class="container-fluid">
<div class="row align-items-end">
<div class="col-7">
1<br>
<br>
<br>
2
</div>
<div class="col-5">
<div class="col-12">
3
</div>
<div class="col-12 align-self-end">
4
</div>
</div>
</div>
</div>
Why not use different row for 1 - 3 and 2 - 4.
Because you have using bootstrap grid system.
7 col - 5 col
-------------
Bootstrap two column layout
Kindly add style in fourth column div.
style="position: absolute;bottom: 0px;"
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-7">
1 <br />
<br />
<br />
<br />
2
</div>
<div class="col-5">
<div class="row no-gutters">
<div class="col-12 align-self-end">
3
</div>
</div>
<div class="row no-gutters" >
<div class="col-12 align-self-end" style="position: absolute;
bottom: 0px; ">
4
</div>
</div>
</div>
</div>
</div>
This could be what you are looking for:
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
3
</div>
</div>
<div class="row">
<div class="col-md-6">
2
</div>
<div class="col-md-6">
4
</div>
</div>
OR
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
2
</div>
<div class="col-md-12">
3
</div>
</div>
</div>
</div>
<div class="col-5">
<row class="no-gutters">
<div class="col-lg-12">
3
</div>
<div class="col-lg-12">
4
</div>
</row>
</div>
It will take full width in any screen size.
Following are my responsive html code with bootstrap design, if i add to CMS->Page->Content my cms page look like collapsed, header and footer alignment issue.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="font-size: larger;">
<h2>Kolupadi Manual</h2>
<p>All kind of Kolu Padi Manual list</p>
<h4 align="center"><u>3 Steps Kolupadi</u></h4>
<div class="card-columns">
<div class="card bg-light">
<div class="card-body text-center">
3 Compact Kolu Padi
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/regular/3_regular_booklet_2017.pdf" class="card-text">3 Regular Kolupadi
</a>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/triple/3_trible_booklet_2017.pdf" class="card-text">3 Triple Kolu Padi
</a>
</div>
</div>
</div>
<br>
<h4 align="center"><u>5 Steps Kolupadi</u></h4>
<div class="card-columns">
<div class="card bg-light">
<div class="card-body text-center">
5 Compact Kolu Padi
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/regular/5_regular_booklet_2017.pdf" class="card-text">5 Regular Kolupadi
</a>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/triple/5_triple_booklet_feb_2017.pdf" class="card-text">5 Triple Kolu Padi
</a>
</div>
</div>
</div>
<br>
<h4 align="center"><u>7 Steps Kolupadi</u></h4>
<div class="card-columns">
<div class="card bg-light">
<div class="card-body text-center">
7 Compact Kolu Padi
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/regular/7_regular_booklet_2017.pdf" class="card-text">7 Regular Kolupadi
</a>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/triple/7_triple_booklet_feb_2017.pdf" class="card-text">7 Triple Kolu Padi
</a>
</div>
</div>
</div>
<br>
<h4 align="center"><u>9 Steps Kolupadi</u></h4>
<div class="card-columns">
<!-- <div class="card bg-light">
<div class="card-body text-center">
3 Compact Kolu Padi
</div>
</div> -->
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/regular/9_regular_booklet_2017.pdf" class="card-text">9 Regular Kolupadi
</a>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/triple/9_triple_booklet_2017.pdf" class="card-text">9 Triple Kolu Padi
</a>
</div>
</div>
</div>
<br>
</div>
</body>
</html>
If I directly add above code into CMS->Page->Content, header and footer alignment collapsed.
What is the proper way to add my design to my block?
How do I place multiple images side by side in a Bootstrap Card?
It should be multiple pictures, but only one title header and description.
In my code, the images start crossing over and intersecting each other.
Eventually, I'd like to use an array of pictures (two or more) and combine them with JavaScript.
The card can be as wide as needed.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center">
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo">
</div>
</div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card" style="width: 50rem;">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<div cardcheckbox id="checkboxdiv">
<input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
</div>
<div class="well text-center">
<div class="col-md-12">Sister Properties:</div>
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo">
</div>
</div>
</div>
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
Tree
</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
Oak Tree with leaves in grassy picture with sunset
</div>
</div>
</div>
</div>
</div>
You might find Bootstrap's image-fluid class useful.
Images in Bootstrap are made responsive with .img-fluid.
max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
Responsive images
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center">
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid">
</div>
</div>
</div>
Here's your second version with the checkbox.
You might consider using max-width instead of width to keep the card responsive.
.card {
max-width: 50rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<div cardcheckbox id="checkboxdiv">
<input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
</div>
<div class="well text-center">
<div class="col-md-12">Sister Properties:</div>
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid">
</div>
</div>
</div>
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">Tree</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
Oak Tree with leaves in grassy picture with sunset
</div>
</div>
</div>
</div>
</div>
i'm new to bootstrap and i need some help to make this custom carousel.
The pictures above below will explain perfectly what i'm trying to make!
Thank you!
Desktop view
Mobile view
Here's my solution using JQuery. Make sure to update each image's src attribute to the appropriate value. I've included links to most of the important methods that were used at the bottom of this post.
<html>
<head>
<title>Custom Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CDNs -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
// lg breakpoint that bootstrap defines is at 992px width
// Look at the Bootstrap Responsive Breakpoints page for more info
if($(window).width() <= 992)
// Look at JQuery Starts-With-Selector and Remove Documentation for more info
$("div[id^='3-slides-']").remove();
else
$("div[id^='slide-']").remove();
});
</script>
</head>
<body>
<div id="custom-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- First 3 slides -->
<div class="carousel-item active" id="3-slides-1">
<div class="container-fluid">
<!-- Check out Bootstrap Grid Documentation for info about rows/cols -->
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item active" id="slide-1">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-2">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-3">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Second 3 slides -->
<div class="carousel-item" id="3-slides-2">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-4">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-5">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-6">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Third 3 slides -->
<div class="carousel-item" id="3-slides-3">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-7">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-8">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-9">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#custom-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#custom-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
CodePen
This is not responsive.
If you resize the window to the size of a mobile view, the JQuery function won't be called; however, if the screen starts with a mobile size, the carousel will be appropriate.
If you need the carousel to be updated to the right view during resizing, I believe you can wrap a resize function on the window around the main JQuery function I've used.
e.g.,
$(window).resize(function() {
if( $(this).width() > width ) {
if($(window).width() <= 992)
...
else
...
}
Useful Links
Bootstrap Responsive Breakpoints
Bootstrap Carousel Documentation
Bootstrap Grid Documentation
JQuery Remove Documentation
JQuery Resize Documentation
JQuery Starts-With-Selector Documentation
I have an attached background image on the container, but it only goes with like half the columns and then the columns overflow and the bg image stops.
i tried min-height
the 2 columns are in a container and the columns contain multiple rows
i don't understand why on earth the container is not growing with the columns
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css"> </head>
<body>
<div class="bg-primary text-center d-flex align-items-center h-50" style="background-image: url("projektberge.png");">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-1 text-white">COVER</h1>
<p class="lead text-white">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
Button
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-faded text-center">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-center" id="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="attached" style="background-image: url("FB-1_Christopher Gusenbauer_PanoramaBahnhof.jpg");">
<div class="h-100">
<div class="container-fluid w-100">
<div class="row h-100">
<div class="col-md-8">
<div class="row" style="height:100%">
<div class="col-md-2 h-100 bg-primary" style="height:100%">
<h1 class="">Summary</h1>
</div>
<div class="col-md-10 h-100">
<div class="row ">
<div class="jumbotron jumbotron-fluid w-100">
<div class="container">
<h1 class="display-3">Jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row bg-primary">
<div class="col-md-6 bg-secondary">
<img class="img-fluid d-block py-3" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg"> </div>
<div class="col-md-6 py-3">
<h1 class="">Heading</h1>
<p class="">Paragraph</p>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-primary"></div>
</div>
<div class="row">
<div class="col-md-12 bg-primary">
<div class="container">
<header class="page-header">
<h1>Dark Responsive Timeline with Bootstrap</h1>
</header>
<ul class="timeline">
<li>
<div class="tldate">Apr 2014</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Surprising Headline Right Here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3 hours ago</small></p>
</div>
<div class="tl-body">
<p>Lorem Ipsum and such.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Breaking into Spring!</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 4/07/2014</small></p>
</div>
<div class="tl-body">
<p>Hope the weather gets a bit nicer...</p>
<p>Y'know, with more sunlight.</p>
</div>
</div>
</li>
<li>
<div class="tldate">Mar 2014</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>New Apple Device Release Date</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/22/2014</small></p>
</div>
<div class="tl-body">
<p>In memory of Steve Jobs.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="tl-heading">
<h4>No icon here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/16/2014</small></p>
</div>
<div class="tl-body">
<p>Here you'll find some beautiful photography for your viewing pleasure, courtesy of
lorempixel.</p>
<p>
<img src="http://lorempixel.com/600/300/nightlife/" alt="lorem pixel"> </p>
</div>
</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Some Important Date!</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/03/2014</small></p>
</div>
<div class="tl-body">
<p>Write up a quick summary of the event.</p>
</div>
</div>
</li>
<li>
<div class="timeline-panel noarrow">
<div class="tl-heading">
<h4>Secondary Timeline Box</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/01/2014</small></p>
</div>
<div class="tl-body">
<p>This might be a follow-up post with related info. Maybe we include some extra links, tweets, user comments, photos, etc.</p>
</div>
</div>
</li>
<li>
<div class="tldate">Feb 2014</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>The Winter Months</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 02/23/2014</small></p>
</div>
<div class="tl-body">
<p>Gee time really flies when you're having fun.</p>
</div>
</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Yeah we're pretty much done here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 02/11/2014</small></p>
</div>
<div class="tl-body">
<p>Wasn't this fun though?</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="row"> </div>
<div class="row"> </div>
<div class="row"> </div>
<div class="row"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</div>
</body>
</html>
It's a bug in Boostrap 4 alpha 6.
It's fixed in Boostrap 4 beta 1 that it's under development.
I noticed you are using Pingendo, you can use the Bootstrap 4 beta 1 version changing the import at the end of your sass file in
#import 'bootstrap-4.0.0-alpha.6';
It seems you haven't included bootstrap references inside your head tag
Here are the links - Bootstrap Js Link
Bootstrap CSS Link
Add them like this.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css" integrity="sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js" integrity="sha512-vyRAVI0IEm6LI/fVSv/Wq/d0KUfrg3hJq2Qz5FlfER69sf3ZHlOrsLriNm49FxnpUGmhx+TaJKwJ+ByTLKT+Yg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>