How do i reduce the space between the nav bar and the image?
(1) Need help for that (I am a newbie)
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3">
<h5 class="my-0 mr-md-auto font-weight-normal"></h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#"><i class="fas fa-user"></i></a>
<a class="p-2 text-dark" href="#"><i class="fas fa-shopping-cart"></i></a>
</nav>
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
**<svg class="display-4">
<image href="assets/img/picture.png" />
</svg**>``
<p class="lead">Quickly build an effective pricing table for your potential customers with this
Bootstrap example. It's built with default Bootstrap components and utilities with little
customization.</p>
</div>
https://jsfiddle.net/Samantha92/8Ljy9xb5/2/
(2) Also, I need help, if I have 10 cards, I need them to show three each on the screen and maybe use carousel and move them off one at a time, with the center card being the one I can view or toggle.
Related
I'm using bootstraps collapsible containers on a website to display some info, I am also using ion-icons to have a + & - to indicate when the container is open or closed, for some reason I am struggling to target the icons to be able to change them, I've tried this thus far.
html
<div class="accordion-item">
<div class="accordion-header w-100" id="headingOne">
<a class="collapsed w-100 d-flex justify-content-between align-items-center" id="toggle" data-bs-toggle="collapse" data-bs-target="#collapse-One" aria-expanded="true" aria-controls="collapse-One">
Title <ion-icon itemid="iconChange" name="add"></ion-icon>
</a>
</div>
<div id="collapse-One" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionProductInfo">
<div class="accordion-body">
Info
</div>
</div>
</div>
js
var myCollapsible = document.getElementById('#toggle')
myCollapsible.addEventListener('show.bs.collapse', function () {
var icon = $("#iconChange");
icon.attr('name', 'remove-outline');
console.log(icon[0]);
});
I know this is only to change it one way so far but I cant even get a message out of the console log.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
hello everyone i have made a dropdwon list that displays something on screen when i press a item in it but i need it to display more than 1 thing at a time but i dont know how to do that
<?php
session_start();
if (!isset($_SESSION["userId"])) {
header('Location: ../../auth/login');
die();
}
<div class="d-flex justify-content-center row">
<div class="col-md-10 col-lg-10">
<div class="border">
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row justify-content-between align-items-center mcq">
</div>
</div>
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row align-items-center question-title">
<h3 class="text-danger"></h3>
<h5 id="complaintHeader" class="mt-1 ml-2">welke lichaamelijke klachten heeft u</h5>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">klachten</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item Maag" href="#" onClick="changeHeader('Maag')">MAAG</a>
<a class="dropdown-item Darmen" href="#" onClick="changeHeader('Darmen')">DARMEN</a>
<a class="dropdown-item Hyperventilatie" href="#" onClick="changeHeader('Hyperventilatie')">HYPERVENTILATIE</a>
<a class="dropdown-item Hartritme-Klachten" href="#" onClick="changeHeader('Hartritme-Klachten')">HARTRITME-KLACHTEN</a>
<a class="dropdown-item Misselijkheid" href="#" onClick="changeHeader('MIsselijkheid')">MISSELIJKHEID</a>
<a class="dropdown-item Keelklachten" href="#" onClick="changeHeader('Keelklachten')">KEELKLACHTEN</a>
</div>
</div>
</div>
<div class="d-flex flex-row justify-content-between align-items-center p-3 bg-white">
<button class="btn btn-primary d-flex align-items-center btn-danger" type="button">
<i class="fa fa-angle-left mt-1 mr-1"></i>
previous
</button>
<button type="button" class="btn btn-primary">bij klachten</button>
<button class="btn btn-primary border-success align-items-center btn-success" type="button">Next
<i class="fa fa-angle-right ml-2"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<?php
require '../include/footer.php'; //include footer
require '../auth/logout-modal.php'; //include logout modal
?>
<script>
function changeHeader(s){
document.getElementById("complaintHeader")
.innerHTML = "welke lichaamelijke klachten heeft u: " + s;
}
so as you can see in my code i made a dropdown button with a script that when i press something in the dropdown it displays it on screen but i want it to display multiple things
If you want to pass multiple things to changeHeader() function you can pass them as an array and in your function append them to your complainHeader with a map() method or a for loop.
<a class="dropdown-item Maag" href="#" onClick="changeHeader(['Maag','DARMEN','MISSELIJKHEID'])">MAAG</a>
function changeHeader(s){
const yourArray = s;
const Header = document.getElementById("complaintHeader");
yourArray.map(item => {
Header.innerHTML += item;
})
}
you can use for loop instead of map() method.
Assume I have a simple website made with Bootstrap 4 containing header, navbar, content-area and footer.
My demo-website can be found and live-edited on JSFiddle: https://jsfiddle.net/26zda5xv/2/
Please find below a screenshot of the website too:
I want the <div class="container"> to fill out the whole page/window-height at least. (min-height?)
This should be done by extending the height of the <div id="content">.
Of course the solution should take care of various screen-resolutions/devices automatically.
How to do this correctly based on the JSFiddle?
Is there a build-in solution in Bootstrap 4 for this task?
Thank you!
to solve this we need 2 steps:
add d-flex flex-column min-vh-100 classes to the container.
add flex-grow-1 class to the content div
see this fiddle
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<body class="bg-secondary">
<div class="container bg-white shadow border border-dark d-flex flex-column min-vh-100">
<img src="http://www.apexcartage.com/wp-content/uploads/2014/05/placeholder-blue.png" class="img-fluid" alt="Responsive image">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div id="content" class="my-3 flex-grow-1">
<p class="h3">Content</p>
</div>
<footer>
<div class="bg-dark text-white mt-4 p-3 border-info" style="border-top: 4px solid">
<h5 class="title">Footer</h5>
</div>
<div class="bg-info p-1"></div>
</footer>
</div>
</body>
Good day,
I am working on this project of mine but unfortunately I'm not skilled enough yet to fix the following problem I have been trying to solve for some time now. I have a webpage that shows the amount of calories that someone needs to consume to hit their training goals. Based on a 3 options radio input selection I want to show 3 different images on the output page based on the selection they made. This can be weight loss, maintenance or muscle gain.
The code is as following:
Code for the input of the goal:
<!-- Goal -->
<div class="row px-md-5 mrow" id="rowtwo">
<div class="col-12 py-5">
<div class="text-center">
<h2 class="text-primary">2. Wat is je doel?</h2>
</div>
</div>
<div class="col-12 col-md-12">
<ul class="row radio-group-goal d-flex flex-stretch p-0 m-0">
<li class="radio col-md-6 selected d-flex flex-stretch mb-2" data-goal="Afvallen / Lager vetpercentage" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100 greenborder">
<h6 class="text-left"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-weight text-primary mr-2"></i> Afvallen / Lager vetpercentage</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">minder kcal/koolhydraten</p> -->
</div>
</li>
<li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Gezonde levensstijl" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
<h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-carrot text-primary mr-2"></i> Gezonde levensstijl</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">Gezond</p> -->
</div>
</li>
<li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Aankomen / Meer spiermassa" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
<h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-dumbbell text-primary mr-2"></i> Aankomen / Meer spiermassa</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">muscle</p> -->
</div>
</li>
</ul>
</div>
Code for the output:
<div class="col-12 col-md-6">
<div class="row">
<div class="col-12 col-md-6 mb-4 d-flex flex-stretch">
<div class="youchoose-box px-4 py-5 d-flex align-items-center justify-content-center flex-column bg-white rounded shadow-sm w-100" style="border:1px solid white;">
<i class="fas fa-trophy text-center text-primary mb-2"></i>
<!-- <p class="mb-0 text-center">Doel</p> -->
<h5 class="text-primary text-center">
<?php echo $_POST['radio-value'];?>
</h5>
</div>
</div>
//The image I want to change based on the radio value:
<div class="container pb-5">
<div class="row">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="d-flex align-items-center justify-content-center rounded shadow-sm">
<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/Macro-split.png">
</div>
</div>
</div>
</div>
<!-- save values and send to next pages -->
<input type="hidden" id="radio-value" name="radio-value" value="<?php echo $_POST['radio-value']?>" />
I hope you can guide me in the right direction as I am now on the basics of understanding Javascript.
Thank you in advance!
Assuming your value is coming through in $_POST['radio-value'] the basic way to do this would be with an if statement to check if one of the 3 values is set, and then set which image that value corrresponds to:
//The image I want to change based on the radio value:
<?php
$image = 'default.png';
if (isset($_POST['radio-value'])) {
if ($_POST['radio-value'] == 'value for image 1') {
$image = 'value1image.png';
} else if ($_POST['radio-value'] == 'value for image 2') {
$image = 'value2image.png';
} else if ($_POST['radio-value'] == 'value for image 3') {
$image = 'value3image.png';
}
}
?>
Then in your image src:
<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/<?php echo $image;?>">
I am trying to use a header from a website in HTML but i am getting a JSX error
<div className="container h-100">
<div className="row h-100 align-items-center justify-content-center text-center">
<div className="col-lg-10 align-self-end">
<h1 className="text-uppercase text-white font-weight-bold">Your Favorite Source of Free Bootstrap Themes</h1>
<hr className="divider my-4">
</div>
<div className="col-lg-8 align-self-baseline">
<p className="text-white-75 font-weight-light mb-5">Start Bootstrap can help you build better websites using the Bootstrap framework! Just download a theme and start customizing, no strings attached!</p>
<a className="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
</div>
</div>
</div>
The error is on this line:
<hr className="divider my-4">
It should have a self-closing /
As in <hr className="divider my-4" />