I wanted to design an audio player footer for a website using HTML, CSS (Bootstrap), but I am struggling with figuring out the layout for columns to align all the assets properly. Here is the layout I want to achieve:
Here is what I have currently:
This is the following code that I have:
<div class="column-wrapper-player" style="align-items: center;">
<div class="col-left-player">
<img src="/img.png" class="track ml-5" width="60" height="60"> </img>
</div>
<div class="col-right-player">
<h5 class="bold-font"> NAME </h5>
<p> ARTIST </p>
</div>
</div>
.column-wrapper-player {
width:100%;
height:100%;
display: flex;
flex-direction: row;
}
.column-left-player {
width: 50px;
height: 100%;
flex-shrink: 0;
}
.column-right-player {
width: 100%;
}
How can I go about achieving the model layout with custom columns?
Edit: I have all the necessary assets, including the buttons and sliders. I just need to figure out how to align everything properly and cleanly in columns.
Very nice question, I really enjoyed doing this layout.
I have made a full live Youtube video on this layout. Please check the below link:
https://youtu.be/GKz6AH-e7FI
And I have added the code also here in Stackoverflow
Let me know if you have any questions.
div.progress{height:3px;}
.volume-progress{width:100px;}
.play-icons{ margin-top: 2px;}
<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://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>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="container-fluid fixed-bottom bg-dark">
<div class="row">
<div class="col-3">
<div class="media">
<img src="https://organicthemes.com/demo/profile/files/2018/05/profile-pic.jpg" style="width:64px;height:64px" class="align-self-center mr-3" alt="...">
<div class="media-body text-white">
<h5 class="mt-0">Song name</h5>
<p>Artist name</p>
</div>
</div>
</div>
<div class="col-6">
<div class="play-icons text-white align-items-center d-flex justify-content-center">
<i class="material-icons text-success">shuffle</i>
<i class="material-icons ml-4">skip_previous</i>
<i class="material-icons ml-4" style="font-size:40px">play_circle_outline</i>
<i class="material-icons ml-4">skip_next</i>
<i class="material-icons ml-4 text-success">repeat</i>
</div>
<div class="progress-block mt-1 text-white d-flex justify-content-between align-items-center">
<div class="mr-2">0:00</div>
<div class="progress w-100">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="mr-2">2:59</div>
</div>
</div>
<div class="col-3 text-white d-inline-flex flex-row-reverse align-items-center">
<div class="ml-2"> <i class="material-icons">open_in_full</i> </div>
<div class="progress volume-progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="ml-2"> <i class="material-icons">volume_down</i> </div>
<div class="ml-2"> <i class="material-icons">queue_music</i> </div>
<div class="ml-2"> <i class="material-icons">playlist_play</i> </div>
</div>
</div>
</div>
Related
I created three cards and it works fine, but in mobile view it stacks over this is the result I have imported all jquery and css it works fine
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<section class="bg-light p-4">
<div class="container col-md-12 ">
<h1 class="text-center">services</h1>
<div class="row text-center ">
<div class="col-md-4 col-4 p-2 position-static ">
<div class="card pt-2 bg-info text-white " style="width: 17em;">
<!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
<i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
<div class="card-body">
<h5 class="card-title">Web App Development</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>
</div>
<div class="col-md-4 col-4 p-2 position-static ">
<div class="card pt-2 bg-info text-white " style="width: 17em;">
<!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
<i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
<div class="card-body">
<h5 class="card-title">Web App Development</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>
</div>
<div class="col-md-4 col-4 p-2 position-static">
<div class="card pt-2 bg-info text-white" style="width: 17em;">
<!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
<!-- <i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i> -->
<i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
<div class="card-body">
<h5 class="card-title">Web App Development</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>
</div>
</div>
</div>
</section>
this is at normal view this works fine,
this what I expected
Try to remove inline width styles from cards.
style="width: 17em;"
Demo
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<section class="bg-light p-4">
<div class="container col-md-12 ">
<h1 class="text-center">services</h1>
<div class="row text-center ">
<div class="col-md-4 col-4 p-2 position-static ">
<div class="card pt-2 bg-info text-white ">
<!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
<i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
<div class="card-body">
<h5 class="card-title">Web App Development</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>
</div>
<div class="col-md-4 col-4 p-2 position-static ">
<div class="card pt-2 bg-info text-white ">
<!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
<i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
<div class="card-body">
<h5 class="card-title">Web App Development</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>
</div>
<div class="col-md-4 col-4 p-2 position-static">
<div class="card pt-2 bg-info text-white">
<!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
<!-- <i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i> -->
<i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
<div class="card-body">
<h5 class="card-title">Web App Development</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>
</div>
</div>
</div>
</section>
I want to keep the list-group-item-action hover effect where it changes the background but I want to remove the click effect that makes it active. How would I do this?
I removed the href="#" from the
If I remove list-group-item-action, the hover effect is removed
I don't really want to specify a hover color in css because the bootstrap list groups automatically change the hover colors in light/dark mode. Also idk what the exact light/dark mode hover colors are lol
const test_list_items = document.querySelectorAll('.test_list_item');
test_list_items.forEach(element => {
element.addEventListener('mouseover', () => {
let previous_item = document.querySelector('.test_list_item.selected');
let current_item = element;
let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);
if (previous_item && previous_item.id !== current_item.id) {
let selected_item = current_item.id;
console.log(selected_item);
console.log(`previous image: ${previous_image.id}`);
console.log(`previous image: ${current_image.id}`);
previous_item.classList.remove('selected');
current_item.classList.add('selected');
// previous_image.style.opacity = 0;
previous_image.classList.remove('d-md-block');
// current_image.style.opacity = 1;
current_image.classList.add('d-md-block');
}
});
});
.test_image .d-md-block {
/* position:absolute; */
/* opacity:1; */
/* transition: opacity 0.5s linear; */
transition-timing-function: opacity 3s ease-in;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<section class="p-5">
<div class="container">
<h2 class="text-center display-5 fw-bold">test</h2>
<p class="lead text-center mb-5">
esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
</p>
<div class="row g-4 justify-content-between">
<div class="col-md">
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected" id="test_list_item_1">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">1</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_2">
<span class="badge">
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">2</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_3">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="rounded-0" style="height: 75px; width: 75px; background-color: yellow;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">3</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
</div>
</div>
<div class="col-md">
<div class="image_container">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" class="test_image d-none d-md-block active" id="test_image_1" style="height: 500px; width: 700px;" />
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" class="test_image d-none" id="test_image_2" style="height: 500px; width: 700px;" />
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="test_image d-none" id="test_image_3" style="height: 500px; width: 700px;" />
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', filename='script/index.js') }}"></script>
I want to keep the list-group-item-action hover effect where it
changes the background but I want to remove the click effect that
makes it active.
If you want :
keep the hover effect
make the click effect same as hover effect
Just add following CSS :
.list-group-item:active {
color: var(--bs-list-group-action-hover-color) !important;
background-color: var(--bs-list-group-action-hover-bg) !important;
}
I don't really want to specify a hover color in css because the
bootstrap list groups automatically change the hover colors in
light/dark mode.
If you want :
remove hover and click effect completely
Just add following CSS :
.list-group-item-action:active,
.list-group-item-action:focus,
.list-group-item-action:hover {
color: unset !important;
background-color: unset !important;
}
For how to find out the CSS specified in those :active, :focus, :hover selectors, by taking Chrome as example, open the browser debugger, select the element that you would like to dig out the CSS, from screenshot below, you can see I highlighted two red boxes.
Click on the :hov option and the available selectors will listed out, just tick/untick them to see the effect.
Hope it helps !
const test_list_items = document.querySelectorAll('.test_list_item');
test_list_items.forEach(element => {
element.addEventListener('mouseover', () => {
let previous_item = document.querySelector('.test_list_item.selected');
let current_item = element;
let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);
if (previous_item && previous_item.id !== current_item.id) {
let selected_item = current_item.id;
console.log(selected_item);
console.log(`previous image: ${previous_image.id}`);
console.log(`previous image: ${current_image.id}`);
previous_item.classList.remove('selected');
current_item.classList.add('selected');
// previous_image.style.opacity = 0;
previous_image.classList.remove('d-md-block');
// current_image.style.opacity = 1;
current_image.classList.add('d-md-block');
}
});
});
.test_image .d-md-block {
/* position:absolute; */
/* opacity:1; */
/* transition: opacity 0.5s linear; */
transition-timing-function: opacity 3s ease-in;
}
.list-group-item-action:active {
color: var(--bs-list-group-action-hover-color) !important;
background-color: var(--bs-list-group-action-hover-bg) !important;
}
/* remove hover & click effect completely */
/*
.list-group-item-action:active,
.list-group-item-action:focus,
.list-group-item-action:hover {
color: unset !important;
background-color: unset !important;
}
*/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<section class="p-5">
<div class="container">
<h2 class="text-center display-5 fw-bold">test</h2>
<p class="lead text-center mb-5">
esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
</p>
<div class="row g-4 justify-content-between">
<div class="col-md">
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected" id="test_list_item_1">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">1</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_2">
<span class="badge">
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">2</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_3">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="rounded-0" style="height: 75px; width: 75px; background-color: yellow;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">3</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
</div>
</div>
<div class="col-md">
<div class="image_container">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" class="test_image d-none d-md-block active" id="test_image_1" style="height: 500px; width: 700px;" />
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" class="test_image d-none" id="test_image_2" style="height: 500px; width: 700px;" />
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="test_image d-none" id="test_image_3" style="height: 500px; width: 700px;" />
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', filename='script/index.js') }}"></script>
Simple override the :focus and :active css--
.list-group-item-action:focus , .list-group-item-action:active{background:transparent !important}
const test_list_items = document.querySelectorAll('.test_list_item');
test_list_items.forEach(element => {
element.addEventListener('mouseover', () => {
let previous_item = document.querySelector('.test_list_item.selected');
let current_item = element;
let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);
if (previous_item && previous_item.id !== current_item.id) {
let selected_item = current_item.id;
console.log(selected_item);
console.log(`previous image: ${previous_image.id}`);
console.log(`previous image: ${current_image.id}`);
previous_item.classList.remove('selected');
current_item.classList.add('selected');
// previous_image.style.opacity = 0;
previous_image.classList.remove('d-md-block');
// current_image.style.opacity = 1;
current_image.classList.add('d-md-block');
}
});
});
.test_image .d-md-block {
/* position:absolute; */
/* opacity:1; */
/* transition: opacity 0.5s linear; */
transition-timing-function: opacity 3s ease-in;
}
.list-group-item-action:focus , .list-group-item-action:active{background:transparent !important}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<section class="p-5">
<div class="container">
<h2 class="text-center display-5 fw-bold">test</h2>
<p class="lead text-center mb-5">
esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
</p>
<div class="row g-4 justify-content-between">
<div class="col-md">
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected" id="test_list_item_1">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">1</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_2">
<span class="badge">
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">2</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_3">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="rounded-0" style="height: 75px; width: 75px; background-color: yellow;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">3</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
</div>
</div>
<div class="col-md">
<div class="image_container">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" class="test_image d-none d-md-block active" id="test_image_1" style="height: 500px; width: 700px;" />
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" class="test_image d-none" id="test_image_2" style="height: 500px; width: 700px;" />
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="test_image d-none" id="test_image_3" style="height: 500px; width: 700px;" />
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', filename='script/index.js') }}"></script>
I am working on simple HTML web but I am stuck on something like 3 boxes I want accordingly in one line you can check the screenshot of example for that how I want I tried many times to do by every way but I failed to solve or sort out this issue kindly please help me in that
see this screenshot how it showing
Here is the screenshot of the example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="property-wrap mb-2 row no-gutter" id="pp">
<div class="col-md-4 col-sm-20">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/smart1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/smart1" class="image-effect overlay">
<img src="assets/images/smart1-logo.svg" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">SuperShopper</h4>
<div class="mb-15">
<p>Lekki Phase 1, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/green_way'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/green_way" class="image-effect overlay">
<img src="assets/images/green_way.png" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">GreenWay Supermarket</h4>
<div class="mb-15">
<p>142 Lekki - Epe Expressway, Beside Monarch Event Center, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/pjv1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase bg-blue">for sale</span> -->
<a href="#" class="image-effect overlay">
<img src="assets/images/pjv.png" alt="" style="width: 100px; height: 100px; border-radius: 0px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">PJV Supermarket</h4>
<div class="mb-15">
<p>36b Kusenla Road, Ikate Elegushi, Lekki</p>
</div>
<!--content-->
</div>
<!--content-->
</div>
</div>
I can't find a way to reduce the width of the input window in the code in the Jumbotron section. I can not see/find any code that controls the width of the input window. The code below is the code from Bootstrap v5. How do I shorten the width of the input window, keeping it centered and its responsiveness?
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- Code for jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Code for FontAwesome -->
<link href="Desktop/FontAwesome/fontawesome-free-icons/css/all.css" rel="stylesheet">
<title>Project App Landing Page</title>
<style type="text/css">
.jumbotron{
background-image: url(blueSky.jpg);
min-height: 450px;
text-align: center;
}
#appSummary {
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MyApp</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download The App</a>
</li>
</ul>
<form class="d-flex">
<div class="col-xs-4">
<input class="form-control" type="email" placeholder="Email" aria-label="Email">
<input class="form-control" type="password" placeholder="Password" aria-label="password">
<button class="btn btn-success" type="submit">Log in</button>
</div>
</form>
</div>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3" >My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="m-y-2">
<p>Want to know more? Join our mailing list!</p>
<form>
<div class="input-group mb-3">
<span class="input-group-text">#</span>
<input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
<button type="submit" class="btn btn-primary btn-md">Sign up</button>
</div>
</form>
</div>
<div class="container">
<div class="row" id="appSummary">
<h1>Why This App Is Awesome</h1>
<p class="lead">Summary, once again, of your app's awesomeness</p>
</div>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="cardPic.png" class="card-img-top" alt="Card Image">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-radiation-alt"></i>Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="cardPic.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="far fa-heart"></i>Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="cardPic.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-pump-medical"></i>Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
</div>
</div>
</body>
</html>
In Bootstrap the form-control class has 100% width. Remove the "form-control" class from this line:
<input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
Then you should be able to apply your own width to the input, either in the <style> block or with a different Bootstrap class.
I'm looking to find the value of the H3 within this block of text, onclick. I have tried the closest method but it's not working. I'd love to know what I'm doing wrong.
$(document).on('click', '.companyBtn', function() {
var ha = $(this).closest('.testTitle').val();
alert(ha);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="col-lg-12 col-sm-6 companyBtn" id="3543">
<div class="strip">
<div class="row">
<div class="col-2">
<img class="img-fluid rounded-circle d-inline pr-2" style="max-width: 50px" src="/members/images/3543.jpg">
</div>
<div class="col-10">
<div class="strip_info seenIcon">
<div class="item_title">
<h3 class="testTitle" style="width:90%;font-size:1.1rem">Test Company</h3>
<small class="d-block mb-3"> <span class="flag-icon flag-icon-gb"></span> United Kingdom</small>
<small class="badge badge-warning">Artist Managers</small>
</div>
</div>
</div>
</div>
</div>
</div>
The .closest() method looks for ancestors of the current node, and h3 is a descendant of .testTitle. Replace .closest() with .find(), which looks for descendants, and get the text content with .text():
$(document).on('click', '.companyBtn', function() {
var ha = $(this).find('.testTitle').text();
console.log(ha);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="col-lg-12 col-sm-6 companyBtn" id="3543">
<div class="strip">
<div class="row">
<div class="col-2">
<img class="img-fluid rounded-circle d-inline pr-2" style="max-width: 50px" src="https://i.picsum.photos/id/400/100/100.jpg?hmac=pvDsAYmMO0rcZJDGuhmCPDrPeCkJIkGR90-rqPYCMmw">
</div>
<div class="col-10">
<div class="strip_info seenIcon">
<div class="item_title">
<h3 class="testTitle" style="width:90%;font-size:1.1rem">Test Company</h3>
<small class="d-block mb-3"> <span class="flag-icon flag-icon-gb"></span> United Kingdom</small>
<small class="badge badge-warning">Artist Managers</small>
</div>
</div>
</div>
</div>
</div>
</div>