Responsive Design Width Issue - javascript

Till Large BreakPoint everything works fine but as soon as I enter Medium & Small BreakPoints
Cards that I have created doesn't take much space on the right side of the page leaving it blank.
I Tried col-sm-12, col-sm-6,col-md-12,col-md-6 .... everything but nothing worked. (I am New To this stuff)
I am using bootstrap version 4.5.0
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/9890999e8e.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght#0,400;1,300&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Roboto Condensed', sans-serif;
}
.navbar-custom {
background-color: black !important;
}
.jumbotron {
text-align: center !important;
padding-top: 100px !important;
background: url(1.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: whitesmoke;
}
.card {
margin-bottom: 50px !important;
}
</style>
<title>Patterns</title>
</head>
<body>
<nav class="navbar fixed-top navbar-custom navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#" style="color: aliceblue;"><i class="fas fa-binoculars " ></i> Patterns</a>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-4">Pattern</h1>
<p class="lead"> Beef ribs spare ribs andouille picanha ham hock ham.</p>
<button type="button" class="btn btn-primary">Do something</button>
<button type="button" class="btn btn-success">Do anotherthing</button>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card" style="width: 18rem;">
<img src="6.jpg" class="card-img-top" alt="laptop">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Download
<i class="far fa-heart"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card" style="width: 18rem;">
<img src="6.jpg" class="card-img-top" alt="laptop">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Download
<i class="far fa-heart"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card" style="width: 18rem;">
<img src="6.jpg" class="card-img-top" alt="laptop">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Download
<i class="far fa-heart"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
I made a test page before and it worked fine using col-md and col-sm, I don't know what is creating problem this time.

the cards are taking 18rem width i just override it with width:100%;
.card {
width: 100%!important;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/9890999e8e.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght#0,400;1,300&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Roboto Condensed', sans-serif;
}
.navbar-custom {
background-color: black !important;
}
.jumbotron {
text-align: center !important;
padding-top: 100px !important;
background: url(1.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: whitesmoke;
}
.card {
margin-bottom: 50px !important;
}
</style>
<title>Patterns</title>
</head>
<body>
<nav class="navbar fixed-top navbar-custom navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#" style="color: aliceblue;"><i class="fas fa-binoculars " ></i> Patterns</a>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-4">Pattern</h1>
<p class="lead"> Beef ribs spare ribs andouille picanha ham hock ham.</p>
<button type="button" class="btn btn-primary">Do something</button>
<button type="button" class="btn btn-success">Do anotherthing</button>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card" style="width: 18rem;">
<img src="6.jpg" class="card-img-top" alt="laptop">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Download
<i class="far fa-heart"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card" style="width: 18rem;">
<img src="6.jpg" class="card-img-top" alt="laptop">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Download
<i class="far fa-heart"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card" style="width: 18rem;">
<img src="6.jpg" class="card-img-top" alt="laptop">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Download
<i class="far fa-heart"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

Related

how to connect a navigation bar (<nav>) with HTML files in google appscript?

I am developing a code where I have different option levels and I want one of those options to display a nav bar with two tabs: one to search customers and the other to add customers, I already have the loadView, loadCustomersView and loadAddCustomerView function in my clients.html doc, but it does not display the content when I click on the tabs.
How can I make the navigation bar with the search and add clients options show me what is in search.html and addcustomer.html? (see image 3)
step 1, click in opcion1
step 2, click in opcion 1.1
step3, have a nav bar with 2 options: search and add customers
here is a copy of all my files.
codigo.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function getOpcion1() {
var html = HtmlService.createHtmlOutputFromFile('opcion1').getContent();
return html
}
function getObtenerClientes() {
var html = HtmlService.createHtmlOutputFromFile('clientes').getContent();
return html
}
function loadPartialHTML_(partial) {
const htmlServ = HtmlService.createTemplateFromFile(partial);
return htmlServ.evaluate().getContent();
}
function loadSearchView() {
return loadPartialHTML_("search");
}
function loadAddCustomersView() {
return loadPartialHTML_("addcustomer");
}
Index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Gestor Virtual de Talento 1.0</title>
<style>
.nav-link {
cursor:pointer;
}
#loading {
position:fixed;
top:0;
left:0;
x-index:10000;
width:100vw;
height:100vh;
background-color: rgba(255,255,255,0.9);
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-primary static-top mb-5" style="background-color: #072146;">
<div class="container-fluid" style="height:67.33px; background-color: #072146">
<div class="d-flex justify-content-end">
<a class="badge badge-info" href="javascript:ventanaSecundaria('https://docs.google.com')" style="text-align: center;">Guía de usuario</a>
</div>
</div>
</nav>
<div class="container">
<h3>Bienvenidos </h3>
<h6>Selecciona una opción</h6>
<P></P>
</div>
<div class="card-group">
<div class="card">
<div style="text-align: center;" >
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1eBB_kiCc6FDkbDZwkKueZho-yDFeBOHU" alt="Card image cap" alt="" >
<div class="card-body">
<input type="button" value="Opcion 1" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getOpcion1()" />
<P></P>
<p class="card-text">Conoce opcion 1</p>
</div>
</div>
</div>
<div class="card">
<div style="text-align: center;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1osgZRT_0ahKHXGyNbasbx_xaBr2_2orx" alt="Card image cap">
<div class="card-body">
<input type="button" value="Opcion 2" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getOpcion2()" />
<P></P>
<p class="card-text">Conoce opcion 2</p>
</div>
</div>
</div>
<div class="card">
<div style="text-align: center;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1Hmxvyc9gM9KEpdQUalaNCvsPFJV8VYfJ" alt="Card image cap" >
<div class="card-body">
<input type="button" value="Opcion 3" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getPagina3()" />
<P></P>
<p class="card-text">conoce pagina 3</p>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div id="resultado" class="container">
</div>
<P></P>
<script>
function ventanaSecundaria (URL){
window.open(URL,"ventana1","width=1400,height=700,scrollbars=NO")
}
function actualizarDiv(html, button) {
var div = document.getElementById('resultado');
div.innerHTML = html;
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
opcion1.html
<P></P>
<br>
<div class="container">
<div class="d-flex justify-content-center">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100" style="width: 18rem;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=19CbMDqXEmgtPemrwiAlsaRyZmdMPrZqA" width="286px" height="180px">
<div class="card-body">
<h5 class="card-title">Opcion 1.1</h5>
<p class="card-text">conoce opcion 1.1</p>
<input type="button" value="Accede aquí" class="btn btn-info"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getObtenerClientes()" />
</div>
</div>
</div>
<div class="col">
<div class="card h-100" style="width: 18rem;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=14_9fglXHnJhb4U4Xyy6XApBJ8KEerDd_" width="286px" height="180px">
<div class="card-body">
<h5 class="card-title">Opcion 1.2</h5>
<p class="card-text">conoce opcion 1.2</p>
<a class="btn btn-info" href="javascript:ventanaSecundaria('https://google.com/')" style="text-align: center;">Accede aquí</a>
</div>
</div>
</div>
</div>
</div>
</div>
clientes.html
<P></P>
<div class="d-flex justify-content-center">
<div class="card mb-5" style="width: 18rem;">
<img src="http://drive.google.com/uc?export=view&id=13n5Nl3nZzL8GRJkG8EeNSPJi-vobrjw_" width="286px" height="180px" class="mx-auto">
<h5 class="text-center">Validación Clientes</h5>
</div>
</div>
<div class="container">
<h6>Selecciona clientes y valídalos.</h6>
<P></P>
</div>
<div class="container">
<nav id="navigation" class="mb-3">
<ul class="nav nav-tabs main-nav">
<li class="nav-item">
<div class="nav-link active" id="search-link">Encontrar cliente</div>
</li>
<li class="nav-item">
<div class="nav-link" id="add-customer-link">Aniadir cliente</div>
</li>
</ul>
</nav>
</div>
<div id="app"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
function loadView(options){
var id = typeof options.id === "undefined" ? "app" : options.id;
var cb = typeof options.callback === "undefined" ? function(){} : options.callback;
google.script.run.withSuccessHandler(function(html){
document.getElementById(id).innerHTML = html;
typeof options.params === "undefined" ? cb() : cb(options.params);
})[options.func]();
}
function loadSearchView(){
loadView({func:"loadSearchView"});
}
function loadAddCustomerView(){
loadView({func:"loadAddCustomersView"});
}
document.getElementById("search-link").addEventListener("click",loadSearchView);
document.getElementById("add-customer-link").addEventListener("click",loadAddCustomerView);
</script>
search.html
<h4>Search</h4>
<div class="mb-3">
<input type="text" class="form-control" id="searchInput" placeholder="search...">
</div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col" class="text-right">#</th>
<th scope="col">ID</th>
<th scope="col">Nombre</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
</table>
addcustomer.html
<h4>Add a Customer</h4>
<div class="add-customer-form">
<div class="mb-3">
<label for="first-name" class="form-label">Nombre</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="mb-3">
<label for="last-name" class="form-label">Apellido</label>
<input type="text" class="form-control" id="last-name">
</div>
<button class="btn btn-primary" id="add-customer-button">Add Customer</button>
</div>
<div class="alert alert-success invisible mt-3" id="save-success-message" role="alert">
New customer Added!
</div>

The carousel Only displays 2 element over the code

I want to see all of my items that are cards total number is 6 but I
ended up by seeing only 2 of them in loop please help me to solve this
problem we see total 3 cads at same time on screen and later on it get
replaced by further cards in row.
i want to see all of my items that are cards total number is 6 but i ended up by seeing only 2 of them in loop please help me to solve this problem we see total 3 cads at same time on screen and later on it get replaced by further cards in row.
#media (max-width: 768px) {
.carousel-inner .carousel-item>div {
display: none;
}
.carousel-inner .carousel-item>div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* display 3 */
#media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.333%);
}
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
.carnext {}
/* card settings */
.card-body {
text-align: center;
}
.card-title {
margin-top: 20%;
}
.top-image-card {
position: absolute;
top: -20%;
left: 38%;
}
#media screen and (max-width: 1349px) and (min-width: 978px) {
.top-image-card {
position: absolute;
top: -20%;
left: 36%;
}
}
#media screen and (max-width: 991px) and (min-width: 668px) {
.top-image-card {
position: absolute;
top: -20%;
left: 28%;
}
}
.card {
margin-top: 80px;
}
/*th
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;400;500;900&display=swap" rel="stylesheet">
<!--Font Owsome-->
<script src="https://kit.fontawesome.com/4575ad6c94.js" crossorigin="anonymous"></script>
<!--Bootstrap-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!--Internal CSS-->
<link rel="stylesheet" href="css/styles.css">
<!--JS-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!--Font Qwsome-->
</head>
<body>
<div class="container text-center my-3">
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 2</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 3</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 4</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 5 </h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 6</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark carnext" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script type="text/javascript">
$('#recipeCarousel').carousel({
interval: 1000
})
$('.carousel .carousel-item').each(function() {
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
</body>
</html>

How to change CSS on click?

I have 4 cards which contain data. I want when first header text card is clicked, it expand upward, and info I displayed and when clicked the same card it hide the body but the rest card stays the same,
Here is visual of what I want.
UPDATE
Here is JSFiddle with all four cards: http://jsfiddle.net/Mwanitete/rzjxkv8e/2/
Here is HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="data">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
</div>
Here is JavaScript
$('.card-header').click(function(){
$('.card').toggleClass('.card-size')
})
Here is CSS
.data{
display: flex;
}
.card-size{
height: 224px;
}
Here's a JSFiddle with a working solution.
I've stripped out the collapse attributes and pulled it down to barebones.
http://jsfiddle.net/9musLxy4/88/
HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="data">
<div class='card-container' data-card-id='1'>
<div class='card-header' data-card-id='1'>
Header
</div>
<div class='card-body collapse' data-card-id='1'>
<div class='data'>
Body 1
</div>
</div>
</div>
<div class='card-container' data-card-id='2'>
<div class='card-header' data-card-id='2'>
Header
</div>
<div class='card-body collapse' data-card-id='2'>
<div class='data'>
Body 2
</div>
</div>
</div>
<div class='card-container' data-card-id='3'>
<div class='card-header' data-card-id='3'>
Header
</div>
<div class='card-body collapse' data-card-id='3'>
<div class='data'>
Body 3
</div>
</div>
</div>
<div class='card-container' data-card-id='4'>
<div class='card-header' data-card-id='4'>
Header
</div>
<div class='card-body collapse' data-card-id='4'>
<div class='data'>
Body 4
</div>
</div>
</div>
</div>
CSS:
.data{
display: flex;
}
.card-body {
border: 1px solid black;
}
JS:
$('.card-container').on('click', function(event) {
var id = $(this).data('card-id')
$('.card-body[data-card-id="' + id + '"]').toggle()
})
$('.card-header').click(function(){
$(this).toggleClass('.card-size');
$(this).parent().find('#test-block').toggleClass('show')
})
Use this
Are you just trying to change the size of the card in general when it is expanded? If so, lose the JQuery, you just need a CSS style:
#test-block .card-body {
height: 224px;
}
If you want to the card size to remain the same after you open it, then you would not want to toggle the size class, but simply add it.
$('.card-header').click(function(){
$(this).closest('.card').addClass('card-size');
})
http://jsfiddle.net/9musLxy4/74/

Bootstrap 4 - On screen 3 images in row with 80% height of screen

I have couple of questions about site, which I'm making with help of Bootstrap 4. I would like to make simple page just using on screen space (no scroll except mobile version) with logo in the upper middle of the page, full width navbar and then 2 rows of 3 full width images, which would be cropped as resolution allows. Here is the sketch. I made some HTML/CSS proposals, but they didn't work properly. Do you have some ideas how to make it? :/
Thanks a lot!
<!DOCTYPE html>
<html lang ="cs">
<head>
<meta charset="utf-8">
<!-- Mobile adaptation -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Page information -->
<meta name="description" content="GeoExpo Eshop. Od replik přes zkameněliny do trilobitů.">
<meta name="keywords" content="eshop zoo, eshop Zoo Praha, GeoExpo, zkameněliny, suvenýry, repliky, šutry, kameny">
<meta name="author" content="Ondřej Sloup">
<!-- Mine Stylesheet -->
<link rel="stylesheet" href="stylesheet/stylesheet.css">
<!-- Imported Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<!-- Scripts (jQuery) -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Tittle -->
<title>Geo Expo</title>
</head>
<body>
<header>
<img class="logo d-block img-fluid mx-auto" src="./logo/PNG.png" alt="Logo" />
</header>
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="Toogle">
<ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Repliky</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unikáty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instalace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
<main class="container-fluid p-0">
<div class="row align-items-center no-gutters">
<div class="col-4">
<img class="image" width="auto" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/park.jpg" alt="Park">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/tunnel.jpg" alt="Tunnel">
</div>
</div>
<div class="row align-items-center no-gutters">
<div class="col-4">
<img class="image" width="auto" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/park.jpg" alt="Park">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/tunnel.jpg" alt="Tunnel">
</div>
</div>
</main>
And CSS
/*INSERT*/
#import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
#import url('https://fonts.googleapis.com/css?family=Cinzel');
/*ALL*/
html, body, main {
height: 100% !important;
max-width: 100% !important;
}
body {
background: grey !important;
}
/*Header*/
header {
height: 15%;
}
.logo {
display: inline-block;
padding: 1rem 0 .5rem 0 !important;
}
/*Images*/
.row {
height: 30% !important;
}
/* NavBar */
nav {
font-size: 13pt;
font-family: 'Cinzel', sans-serif;
padding: .3rem 0 .3rem 0 !important;
text-transform: capitalize;
}
.nav-link {
color: #fff !important;
margin: 0 25% 0 25%;
}
.nav-link:hover {
font-style: underline;
}
For future, you can use the http://shoelace.io/
That being said, your html code should look like this:
<div class="container">
<div class="row Logo">
<div class="col-sm-3">
<!-- This is where you should put your logo image -->
</div>
</div>
<div class="row Menu">
<div class="col-sm-12">
<!-- this is where your menu goes in -->
</div>
</div>
<div class="row Images">
<div class="col-sm-4">
<!-- your first image -->
</div>
<div class="col-sm-4">
<!-- your second image -->
</div>
<div class="col-sm-4">
<!-- your third image -->
</div>
<div class="col-sm-4">
<!-- your forth image -->
</div>
<div class="col-sm-4">
<!-- your fifth image -->
</div>
<div class="col-sm-4">
<!-- your last image -->
</div>
</div>
</div>
Also, have a look at the bootstrap layout page https://getbootstrap.com/docs/4.0/layout/grid/

Animation in chrome via Mobirise glitches

I'm new to Stack, html and mobirise and (insert anything).
So, I bought a template in Mobirise, built a website Skystreem, but have 1 problem, animation in blocks doesn't work in Chrome or any webkit browsers, works in Edge and Safari. (especially that part "section class="counters1").
So, I tried to explore it and found this: For example,
1) if I add 2 blocks and then counter animation block - it doesnt count, just shows numbers.
2) if I add all the same, but counter block is first - it does animate in chrome.
I tried to check source code, but it is exactly the same and using the same assets, just sections' places (header2-h and counters1-d) are switched places.
Also there you can find the code itself:
<!DOCTYPE html>
<html>
<head>
<!-- Hi -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/images/logo.png" type="image/x-icon">
<meta name="description" content="">
<title>Home</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">
<link rel="stylesheet" href="assets/web/assets/icons/icons.css">
<link rel="stylesheet" href="assets/tether/tether.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="assets/animate.css/animate.min.css">
<link rel="stylesheet" href="assets/theme/css/style.css">
<link href="assets/fonts/style.css" rel="stylesheet">
<link rel="stylesheet" href="assets/skystreem/css/mbr-additional.css" type="text/css">
</head>
<body>
<section class="mbr-section article content1 cid-qA7BcRsr7c" id="content1-g" data-rv-view="229">
<div class="container">
<div class="media-container-row">
<div class="mbr-text col-12 col-md-12">
<h2 class="mbr-fonts-style block-title align-center display-2">Siz əldə edirsiniz</h2>
</div>
</div>
</div>
</section>
<section class="header2 cid-qA7BfwvgVH" id="header2-h" data-rv-view="233">
<div class="container">
<div class="media-container-row">
<div class="media-content">
<h1 class="mbr-section-title mbr-white pb-3 mbr-fonts-style display-1">Bu nədir?</h1>
<div class="mbr-section-text mbr-white pb-3 ">
<p class="mbr-text mbr-fonts-style display-5"><strong>SkyStreem </strong>– Azərbaycanda çalışan şirkətlər üçün unikal marketinq xidmətidir.<br><br>Təsəvvür edin, müştəri məkanınızda WiFi şəbəkənizə qoşulur və Siz onun Facebook/Instagram profili, onun adı, yaşı, ad günü və bütün digər
dəyərli ictimai məlumatlarını icazəsi ilə avtomatik əldə edirsiniz!
<br><br>Bizimlə bu <strong>artıq mümkündür</strong>!</p>
</div>
</div>
<div class="mbr-figure" style="width: 100%;">
<img src="assets/images/pic3-6881x5681.jpg" alt="SkyStreem" title="" media-simple="true">
</div>
</div>
</div>
</section>
<section class="counters1 counters cid-qA7ADWZ6ht" id="counters1-d" data-rv-view="230">
<div class="mbr-overlay" style="opacity: 0.7; background-color: rgb(4, 54, 124);">
</div>
<div class="container mbr-white">
<div class="container pt-4 mt-2">
<div class="media-container-row">
<div class="card p-3 align-center col-12 col-md-6 col-lg-4">
<div class="panel-item p-3">
<div class="card-text">
<h3 class="count pt-3 pb-3 mbr-semibold mbr-fonts-style display-1">
166
</h3>
<h4 class="mbr-content-title mbr-semibold pb-3 mbr-fonts-style display-5">
Clients
</h4>
</div>
</div>
</div>
<div class="card p-3 align-center col-12 col-md-6 col-lg-4">
<div class="panel-item p-3">
<div class="card-text">
<h3 class="count pt-3 pb-3 mbr-semibold mbr-fonts-style display-1">
210
</h3>
<h4 class="mbr-content-title mbr-semibold pb-3 mbr-fonts-style display-5">
Projects
</h4>
</div>
</div>
</div>
<div class="card p-3 align-center col-12 col-md-6 col-lg-4">
<div class="panel-item p-3">
<div class="card-text">
<h3 class="count pt-3 pb-3 mbr-semibold mbr-fonts-style display-1">
357
</h3>
<h4 class="mbr-content-title mbr-semibold pb-3 mbr-fonts-style display-5">
Testimonials
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script src="assets/popper/popper.min.js"></script>
<script src="assets/tether/tether.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/smooth-scroll/smooth-scroll.js"></script>
<script src="assets/viewport-checker/jquery.viewportchecker.js"></script>
<script src="assets/theme/js/script.js"></script>
<div id="scrollToTop" class="scrollToTop mbr-arrow-up"><a style="text-align: center;"><i class="mbri-down mbr-iconfont"></i></a></div>
<input name="animation" type="hidden">
</body>
</html>
I will be very grateful to anyone who helps even a little bit.
Thank y'all in advance!
Yes, in last versions Mobirise often has this problem in different themes. I solved this issue with moving the script. Maybe you would also find an answer somewhere here: http://benalman.com/projects/jquery-throttle-debounce-plugin/

Categories

Resources