I have been trying to figure out why my navbar doesn't expand itself when in mobile view, rather the menu ends up occupying the following section. I have tried playing around with static/fixed navbars, adding padding to the body, to no avail.
I'm also not sure about where I should be including my container-fluid. I've seen examples of it wrapping the entire navbar, while others only wrap the brand.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Coins 4 Clothes</title>
<!-- Stylesheets and libraries -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS stylesheets-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="stylesheet.css">
<!-- Bootstrap scripts -->
<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>
</head>
<body>
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-md-brand" href="">
<img class="img-fluid c4clogo" src="images/output-onlinepngtools.png" alt="Coins 4 Clothes logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#footer">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">Log in</a>
</li>
</ul>
</div>
</Nav>
<hr class="hr-nav"></hr>
<!-- Carousel section -->
<div id="carouselExampleIndicators" class="carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class= "headings-slide1">
<h2 class="headings-slides">De-clutter your closet.</h3>
<h3 class="headings-slides">Help the needy.</h3>
<h3 class="headings-slides">Earn Bitcoins.</h3>
<hr class="hr-slides"></hr>
</div>
<img class="d-block w-10" src="..." alt="First slide">
</div>
<div class="carousel-item">
<div class= "headings-slide2">
<h3 class="headings-slides">De-clutter your closet.</h3>
<h2 class="headings-slides">Help the needy.</h2>
<h3 class="headings-slides">Earn Bitcoins.</h3>
<hr class="hr-slides"></hr>
</div>
<img class="d-block w-10" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<div class= "headings-slide3">
<h3 class="headings-slides">De-clutter your closet.</h3>
<h3 class="headings-slides">Help the needy.</h3>
<h2 class="headings-slides">Earn Bitcoins.</h2>
<hr class="hr-slides"></hr>
</div>
<img class="d-block w-10" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
hello world
</body> ```
and here is the CSS
Below is the CSS:
font-size: 30px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
/* Navigation Bar */
.navbar {
background-color: #FFFFFF;
text-align: center;
height: 70px;
}
.navbar-md-brand {
height: 70px;
width: 276px;
padding-top: 10px;
}
.nav-item {
padding: 18px;
}
.nav-link {
font-family: "ubuntu",sans-serif;
font-weight: 500;
font-size: 1.2rem;
}
.navbar-light .navbar-nav .nav-link .navbar-toggler-icon {
color: #21bf73;
}
/* Carousel */
.carousel-control-prev {
margin-left: -100px;
}
.carousel-control-next {
margin-right: -100px;
}
/* Download Buttons*/
.download-button {
margin: 5% 3% 5% 0;
}
.headings-slides{
padding-left: 20px;
}
.hr-slides{
margin-top: 20px;
margin-left: 30px;
}
.hr-nav{
margin-top: inherit;
border-top: 3px solid black;
}
h2{
color: #478559;
font-family: "ubuntu",sans-serif;
}
There are a couple of ways to fix this. Since you are using a custom .navbar-md-brand, the simplest way is to set it like this:
.navbar-md-brand {
height: 70px;
max-width: 276px;
flex-grow: 1; /* let it "spread" until max-width */
padding-top: 10px;
}
For an ideal scenario, you need to check these breakpoints and "rewrite" .navbar-md-brand for corner cases, if you need
https://getbootstrap.com/docs/4.4/layout/overview/#responsive-breakpoints
Or you can stay with the "official" way of doing things and use some of the existing classes like class="navbar-brand mb-0" https://getbootstrap.com/docs/4.4/components/navbar/#brand
Either way, hope these tips help you.
Related
On every page I make, the page is able to scroll horizontally a tiny bit. When it scrolls, there is nothing there, the footer and header ends at the edge of the screen and just scrolls into white. It is only a little, but is annoying as the scroll bar takes up room on my tiny laptop.
[notice the white space to the side of the header.][1]
[1]: https://i.stack.imgur.com/mHSDx.png
As this happens on every page, I have a feeling it has something to do with my CSS for the header or footer, although I cant figure out which. I have included my CSS and my home page below.
I was hoping someone could help end the horizontal scrolling.
CSS:
#navbar {
background-color: #1A409F;
position: center;
}
#NavBrandText {
color: white;
text-decoration: none;
font-style: italic;
font-family: Helvetica-UltraCompressed;
letter-spacing: 1px;
padding-right: 80px;
}
#font-face {
font-family: Helvetica-UltraCompressed;
src: url(Helvetica-UltraCompressed.otf);
}
#offcanvas-subheading {
font-size: 30px;
padding-right: 15px;
}
#offcanvas-body {
font-size: 20px;
padding-left: 10px;
text-decoration: none;
color: black;
}
#navlogo {
width: 80px;
}
#offcanvas-open {
border-style: solid;
border-color: #2149ae;
border-width: 5px;
border-radius: 5px;
color: white;
}
#menuButton {
height: 20px;
width: 20px;
}
.carousel-control-prev {
padding-right: 150px;
}
.carousel-control-next {
padding-left: 150px;
}
#footer {
background-color: #292929;
padding-top: 20px;
padding-bottom: 20px;
}
.footer-top .container {
padding-bottom: 10px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row:before {
display: table;
content: " ";
}
.col-sm-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.footernote {
display: block;
text-align: center;
margin-bottom: 0;
}
.footernote li {
display: inline-block;
color: #fff;
}
#before:before {
font-family: FontAwesome;
content: " \f111 ";
font-size: 7px;
margin: 5px;
vertical-align: middle;
color: #fff;
}
.ul {
padding: 0;
margin-top: 0;
}
.ul li {
list-style: none
}
#SystemBuilder {
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
width: 100%;
height: 1000px;
}
#ProductHead {
margin-left: 25px;
}
Home Page HTML
<!DOCTYPE HTML>
<html lang="en-AU">
<head>
<!-- Require Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CDN - Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- CDN - FontAwesome -->
<script src="https://kit.fontawesome.com/fe972dc1f9.js" crossorigin="anonymous"></script>
<!-- Title -->
<title>Jailbreak Computers</title>
<!-- Webpage Icon -->
<link rel="shortcut icon" href="Images/Jailbreak Computers Icon.png"/>
<!-- CSS -->
<link rel="stylesheet" href="Style.css">
</head>
<body>
<!-- Nav Bar -->
<nav class="navbar navbar-dark d-flex justify-content-between" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" style="color: white;" href="Home Page.html">
<img src="Images/Jailbreak Computers Logo.png" alt="logo" id="navlogo" class="rounded-circle">
</a>
<a id="NavBrandText" href="Home Page.html">
<h1 style="font-size: 437.5%;">Jailbreak Computers</h1>
</a>
<ul class="navbar-nav">
<button class="btn" type="button" id="offcanvas-open" data-bs-toggle="offcanvas" data-bs-target="#pages">
<i id="menuButton" class="fas fa-bars"></i>
</button>
</ul>
</div>
</nav>
<!-- Offcanvas Pages Menu -->
<div class="offcanvas offcanvas-end" id="pages">
<div class="offcanvas-header">
<h1 class="offcanvas-title" id="offcanvas-title"><center>Pages</center></h1>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<ul style="list-style-type:none;">
<h3 class="display-3" id="offcanvas-subheading">PC Components</h3>
<li><a id="offcanvas-body" href="PCCOM_CPUs.html">CPUs</h5></a></li>
<li><a id="offcanvas-body" href="PCCOM_MBD.html">Motherboards</a></li>
<li><a id="offcanvas-body" href="PCCOM_Memory.html">Memory</a></li>
<li><a id="offcanvas-body" href="#">Storage Devices (HDD/SSD)</a></li>
<li><a id="offcanvas-body" href="#">Graphics Cards</a></li>
<li><a id="offcanvas-body" href="#">Power Supply</a></li>
<li><a id="offcanvas-body" href="#">Case</a></li>
<li><a id="offcanvas-body" href="#">Accessories</a></li>
<br>
<li><a id="offcanvas-body" href="PCCOM_SystemBuilder.html">System Builder</a></li>
<br>
<h3 class="display-3" id="offcanvas-subheading">Peripherals</h3>
<li><a id="offcanvas-body" href="#">Keyboards</a></li>
<li><a id="offcanvas-body" href="#">Mice & Mousepads</a></li>
<li><a id="offcanvas-body" href="#">Monitors</a></li>
<li><a id="offcanvas-body" href="#">Headsets/Speakers</a></li>
<li><a id="offcanvas-body" href="#">Microphones</a></li>
<br>
<h3 class="display-3" id="offcanvas-subheading">Software</h3>
<li><a id="offcanvas-body" href="#">Apps</a></li>
<li><a id="offcanvas-body" href="SW_Games.html">Games</a></li>
<li><a id="offcanvas-body" href="#">Operating Systems</a></li>
<br>
<h3 class="display-3" id="offcanvas-subheading">Other</h3>
<li><a id="offcanvas-body" href="#">Competitions</a></li>
</ul>
</div>
</div>
<!-- Carousel -->
<div id="Carousel" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="3"></button>
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="4"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<a href="https://www.microsoft.com/en-au/windows/windows-11" target="_blank">
<img src="Images/Windows 11.gif" alt="Windows 11" class="d-block w-100">
</a>
</div>
<div class="carousel-item">
<a href="https://www.computeralliance.com.au/search?search=EPOS%20H6PRO" target="_blank">
<img src="Images/EPOS Headset.gif" alt="EPOS Headsets" class="d-block w-100">
</a>
</div>
<div class="carousel-item">
<a href="https://www.computeralliance.com.au/Intel-Game-Bundle-Q4" target="_blank">
<img src="Images/IntelPromo.jpg" alt="Intel Promo" class="d-block w-100">
</a>
</div>
<div class="carousel-item">
<a href="https://www.computeralliance.com.au/search?search=+%20BONUS%20USD%20Steam%20Voucher!*" target="_blank">
<img src="Images/MSIPromo.png" alt="MSI Promo" class="d-block w-100">
</a>
</div>
<div class="carousel-item">
<a href="https://www.computeralliance.com.au/search?search=BONUS%20Far%20Cry%206!*" target="_blank">
<img src="Images/SamsungPromoFarCry.jpg" alt="Samsung Promo" class="d-block w-100">
</a>
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#Carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#Carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<br>
<br>
<!-- Vertically Centered Cookies Modal -->
<div class="modal fade" id="onload" tabindex="-1" aria-labelledby="modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" id="onload">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal">Do You Want A Cookie? We Want Yours! 🍪</h5>
</div>
<div class="modal-body">
<strong>This site uses cookies</strong> to personalise the content for you. We legally have to ask you to accept these for marketing and advertising purposes. Cookies are used by third-parties to offer ads suited and tailored to you.<br>
<strong>Just kidding. We dont really use cookies.</strong> There are no ads on this site sponsored by third-parties, but to be annoying, we do ask you disable you Ad Blocker so we do get paid for ads.
</div>
<div class="modal-footer">
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">
<button type="button" class="btn btn-secondary">More Information</button>
</a>
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Accept & Close</button>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="row">
<div class="col-sm-12">
<ul class="footernote">
<li>Local Partners: Computer Alliance and Umart</li>
</ul>
<ul class="footernote">
<li>Showroom Open 7 Days</li>
<li id="before">
Monday to Friday 8am to 5pm
</li>
<li id="before">
Thursday 8am to 7pm
</li>
<li id="before">
Saturday 9am to 5pm
</li>
<li id="before">
Sunday 9am to 4pm
</li>
</ul>
<ul class="footernote">
<li>Cnr Manly Rd & New Clevland Rd, Tingalpa</li>
<li id="before">Phone 07 2667 8837 (07 COMPUTER)</li>
<li id="before">Email sales#jailbreakcomputers.com.au</li>
</ul>
</div>
</div>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- import jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!--Modal JS Script -->
<script type="text/javascript">
window.onload = () => {
$('#onload').modal('show');
}
</script>
</body>
</html>
Thanks,
Pilot640
the problem is in the footer.
Since .row has negative left and right margin, you have to insert a .container between the <footer> and the .row.
I have a problem with my html website. I am currently using Bootstrap-5. When I change the slides using carousel in website, there is white blanks keep appearing. How can I deal with this problem?
Here is my code!
HTML
<!doctype html>
<html lang="kr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<title>P&P</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<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>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">P & P</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav m-auto my-2 my-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Some Script
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Some script</a></li>
<li><a class="dropdown-item" href="#">Some script</a></li>
<li><a class="dropdown-item" href="#">Some script</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link active"href="#">Some script</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Some script</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Some script</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="lemon_wp.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
<div class="carousel-item">
<img src="lemon_wp.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>👑</h5>
<h6>Some script<br>Other script</h6>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
<section class="babies">
<div class="container py-5">
<div class="row py-5">
<class class="col-lg-5">
<h1></h1>
</class>
</div>
</div>
</section>
</html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar-brand{
font-size: 2rem;
color: black;
}
.navbar-brand:hober{
color: black;
}
.nav-link{
margin-right: 10px;
margin-left: 10px;
color: black;
text-transform: uppercase;
}
.nav-link:hover{
color: black;
}
.main{
background-color: lemonchiffon;
background-size: cover;
height: 100vh;
width: 100%;
background-position: 50% 50%;
}
.main h1{
font-size: 4rem;
font-weight: 700;
/*fontfamiliy*/
}
.absolute-div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.item {
position:relative;
}
.carousel-item{
height: 100vh;
min-height: 300px;
background: no-repeat scroll center scroll;
-webkit-background-size: cover;
background-size: cover;
}
.carousel-item::before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.carousel-caption{
bottom: 35%;
padding-left: 100px;
padding-right: 100px;
color: black;
}
.carousel-caption h5{
font-size: 100px;
font-weight: 700;
}
.carousel-caption h6{
font-size: 60px;
font-weight: 600;
}
.carousel-control-next-icon:after{
content: '>';
font-size: 55px;
color: black;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: black;
}
.carousel {
width:100% !important;
overflow: hidden !important;
right:0 !important;
}
.carousel-inner{
overflow:visible
}
I cannot really find the problem in my code.
The carousel example that I use is from the bootstrap official site.
I don't know why this is happening but you can try this it works on your code
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="a.lpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
<div class="carousel-item">
<img src="b.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
<div class="carousel-item">
<img src="c.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
and you don't need this code on your css you have it by default in bootstrap
.carousel-control-next-icon:after{
content: '>';
font-size: 55px;
color: black;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: black;
}
dear when you add carousel slider it auto append white arrow for slider movement to left right its part of carousel default css and in your css you had also added the arrow by the code given below
.carousel-control-next-icon:after{
content: '>';
font-size: 55px;
color: black;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: black;
}
try to comment it so it will remove the black arrow
or use carousal javacript method to remove the black arrow
I am trying to create carousel responsive image inside the index home page which are being displayed inside the common layout page. But when I reduce the height carousel-item div, full image is not being showed in index html. How can I show the full image as responsive , even if I reduce the height of carousel-item div.?
My code given below
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - MyCompany</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="container-fluid icon-top py-4 px-5">
<div class="row">
</div>
</div>
<header id="header">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MyCompany</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Our Project</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="body-container">
#RenderBody()
</div>
<footer class="border-top footer text-muted">
<div class="container" id>
© 2021 - MyCompany - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/js/all.js"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Index.cshtml
#{
ViewData["Title"] = "Home Page";
}
<section id="home-heading">
<div id="MyCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item carousel-image-1 active">
</div>
<div class="carousel-item carousel-image-2">
</div>
<div class="carousel-item carousel-image-3">
</div>
</div>
<a class="carousel-control-prev" href="#MyCarousel" 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="#MyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- INFO SECTION -->
<section id="info" class="py-3>
<div class=" container">
<div class="row">
<div class="col-md-8 align-self-center">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate eveniet blanditiis incidunt iusto
corrupti illum cum laudantium ex sequi amet. ssfsdfs fjjerhehr uiewruhweuiruiewruyhyuewiry iweuyr
ryewiuryiweuy. uieeryewi iuweriwe yb 7weyr7ewy87r7ywe8ry8wer8 we87r y87we78r7we8r
7we87rwe87r87wer8werweuewof
w8ueuwe88ur9we8r </p>
Learn More
</div>
<div class="col-md-4">
<img src="img/laptop.png" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
Site.css
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
#body-container {
/* */
top: 0;
bottom: 0;
right: 0;
left: 0;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
/* Vertically center the text there */
}
.icon-top {
background-color: chocolate;
}
.navbar .nav-link {
font-size: 14px !important;
text-align: right !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.navbar .nav-item.active {
border-left: #444 3px solid;
}
.carousel-item {
height: 800px;
}
.carousel-image-1 {
background: url('../img/banner-1.jpeg');
background-size: cover;
}
.carousel-image-2 {
background: url('../img/banner-2.jpeg');
background-size: cover;
}
.carousel-image-3 {
background: url('../img/banner-3.jpeg');
background-size: cover;
}
With Many Thanks
Pol
Add this to your Layout page.
#RenderSection("style", required: false)
Now add your Carousel code to any View page. under#section style{ "your bootstrap carousel code"} so for that, you will successfully show your carousel where you want. also, the carousel fits the full image as responsive.
#section style{
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top:-15px">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img1" />
<div class="carousel-caption">
<h3>Image 1</h3>
<p>A happy image</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img2" />
<div class="carousel-caption">
<h3>Image 2</h3>
<p>A new image</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img3" />
<div class="carousel-caption">
<h3>Image 3</h3>
<p>An old image</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
}
this is simple html code together with bootstrap carousel which have three images to slide , then added an overlay to make carousel caption more attractive ! it works fine on large screen size but on small screen size including mobile phone(smartphones) the height of overlay is increased than the height of carousel !! how to make them have the same height even on a small screen size?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"rel="stylesheet">
<link href="phcoding/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght#400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght#400;700&display=swap" rel="stylesheet">
<title>| Catering Services |</title>
<style>
.overlay {
position: relative;
width: 100%;
min-height:100%;
background-color: #080d15;
opacity: .5;
z-index:1000;
}
.carousel .carousel-item {
height: 500px;
}
.carousel-item img {
position: absolute;
object-fit:cover;
top: 0;
left: 0;
max-height: 100%;
}
.carousel-caption {
position: absolute;
right: 15%;
top: 50%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
z-index:1000
}
</style>
</head>
<body>
<section id="home">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand">Catering</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
<li class="nav-item-active">
<a class="nav-link justin" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#service">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#sample">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact Us</a></li>
</div>
</ul>
</nav>
</section>
<!---carousel--->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_03_hd_pictures_167556.jpg" alt="First slide">
<div class="carousel-caption">
<h5>Bringing the world to your table
</h5>
</div>
</div>
<div class="carousel-item">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_05_hd_picture_167554.jpg" alt="Second slide">
<div class="carousel-caption">
<h5>Creating memories that last a lifetime</h5>
</div>
</div>
<div class="carousel-item">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/fruit_juice_and_fruit_stock_photo_167154.jpg" alt="Third slide">
<div class="carousel-caption">
<h5>Filling every occasion with great food and service.</h5>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="jsplugins/js/jquery.min.js"></script>
<script src="jsplugins/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Make the all images to same height as
height:100%;
Instead of overlay to low the image brightness you can also use the Filter CSS property to images
filter: brightness(0.5);
The output will be same as overlay
You can use overlay for text over the carousel images
Can you please check the below code link? Hope it will work for you. You need to just give height: 100%; to .overlay and .carousel-item img instead of min-height:100%; or max-height:100%;
Please refer to this link: https://jsfiddle.net/yudizsolutions/wyh7zvt9/5/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<link href="phcoding/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght#400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght#400;700&display=swap" rel="stylesheet">
<title>| Catering Services |</title>
<style>
.overlay {
position: relative;
width: 100%;
height: 100%;
background-color: #080d15;
opacity: .5;
z-index: 1000;
}
.carousel .carousel-item {
height: 500px;
}
.carousel-item img {
position: absolute;
object-fit: cover;
top: 0;
left: 0;
height: 100%;
}
.carousel-caption {
position: absolute;
right: 15%;
top: 50%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
z-index: 1000
}
</style>
</head>
<body>
<section id="home">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand">Catering</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
<li class="nav-item-active">
<a class="nav-link justin" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#service">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#sample">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact Us</a></li>
</ul>
</div>
</nav>
</section>
<!---carousel--->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_03_hd_pictures_167556.jpg" alt="First slide">
<div class="carousel-caption">
<h5>Bringing the world to your table
</h5>
</div>
</div>
<div class="carousel-item">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_05_hd_picture_167554.jpg" alt="Second slide">
<div class="carousel-caption">
<h5>Creating memories that last a lifetime</h5>
</div>
</div>
<div class="carousel-item">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/fruit_juice_and_fruit_stock_photo_167154.jpg" alt="Third slide">
<div class="carousel-caption">
<h5>Filling every occasion with great food and service.</h5>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="jsplugins/js/jquery.min.js"></script>
<script src="jsplugins/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
I'm having an issue regarding the CSS while applying to the UL and LI Tag in HTML UI designing.
My CSS Code
.jobs {
list-style: none;
}
.jobs li {
float: left;
margin-left: 20px;
padding: 10px;
}
.jobs::after {
content: "";
display: grid;
clear: both;
}
<ul class="jobs">
<div th:each="indTypeProduct :${indTypeProducts}">
<li>
<div class="card" id="wrapper" style="align-items: center;">
<p th:text="${indTypeProduct}" />
</div>
</li>
<br>
</div>
</ul>
Could you please anyone help me on this issue?
Check the view source
Updated Code Please have a look and let me know where I'm going wrong and let me know, I simply want all my result should be align and have in same line.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css">
#wrapper {
margin-left: 50px;
margin-right: 20px;
padding: 12px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: cursive;
}
.price {
color: grey;
font-size: 24px;
}
.card a {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
text-decoration: none;
}
.card a:hover {
opacity: 0.5;
}
.jobs {
list-style: none;
}
.jobs li {
float: left;
margin-left: 20px;
padding: 10px;
}
.jobs::after {
content: "";
display: grid;
clear: both;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/home">Cart Studio</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-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 mr-auto">
<li class="nav-item active"><a class="nav-link" href="/home">Home
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item"><a class="nav-link" href="/product">Product</a>
</li>
<li class="nav-item"><a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item"><a class="nav-link" href="/profile">Profile</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<br>
<div>
<h4>
<p style="margin-left: 15px"> Hello test#gmail.com Greetings!!</p>
</h4>
</div>
<hr style="color: black;">
<div id="carouselExampleIndicators" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/uploads/images.jpg"
alt="First 1 slide" width="100" height="350">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/uploads/images.jpg"
width="100" height="350" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/uploads/images.jpg"
width="300" height="350" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators"
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="#carouselExampleIndicators"
role="button" data-slide="next"> <span
class="carousel-control-next-icon" aria-hidden="true"></span> <span
class="sr-only">Next</span>
</a>
</div>
<hr style="color: black;">
<ul class="jobs">
<div>
<li>
<div class="card" id="wrapper" style="align-items: center;">
<!-- <img th:src="#{/images/Mobile-Phones-Category.jpg}" alt="category" width="150" height="150"> -->
<p >retail</p>
</div>
</li>
<br>
</div>
<div>
<li>
<div class="card" id="wrapper" style="align-items: center;">
<!-- <img th:src="#{/images/Mobile-Phones-Category.jpg}" alt="category" width="150" height="150"> -->
<p >mobile</p>
</div>
</li>
<br>
</div>
</ul>
<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.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
One thing I have added here <ul class="row" style="width: 400px"> and it fixed the issue and width for not getting horizonatl scroll bar.