htmlcssbootstrap-4carousel
HTML, CSS and Bootstrap contents are overlapping
OutPut
I have been working in a small website with bootstrap carousel and in this particular segment of program, the bootstrap and HTML, CSS gets overlapped by default not sure how to seperate them I have attached the code below, I have also shared a codepen link https://codepen.io/gladwin-james/pen/RwoVQjv for live output
HTML
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="slider">
<div class="centering_the_slider_contents">
<!-- Nut 1-->
<div class="carousel-item active">
<figure class="images_in_nuts">
<img src="images/almonds.jpg" />
</figure>
<div class="nut_text">
<h2>Almond</h2>
<h3 class="rich_in">Rich In</h3>
<p>
Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
Phosphorus, Magnesium, Copper, <br />
Phytonutrients, specifically flavonoids, plant sterols,<br />
phenolic acids
</p>
</div>
</div>
<!-- Nut 1 Ends-->
<!-- Nut 2-->
<div class="carousel-item">
<figure class="images_in_nuts">
<img src="images/almonds.jpg" />
</figure>
<div class="nut_text">
<h2>Almond 2</h2>
<h3 class="rich_in">Rich In</h3>
<p>
Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
Phosphorus, Magnesium, Copper, <br />
Phytonutrients, specifically flavonoids, plant sterols,<br />
phenolic acids
</p>
</div>
</div>
<!-- Nut 2 Ends-->
<!-- Nut 3-->
<div class="carousel-item">
<figure class="images_in_nuts">
<img src="images/almonds.jpg" />
</figure>
<div class="nut_text">
<h2>Almond 3</h2>
<h3 class="rich_in">Rich In</h3>
<p>
Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
Phosphorus, Magnesium, Copper, <br />
Phytonutrients, specifically flavonoids, plant sterols,<br />
phenolic acids
</p>
</div>
</div>
<!-- Nut 3 Ends-->
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</div>
</div>
</div>
</div>
<!-- Everything Related to nuts ends here - Slider Ends-->
<div class="last_contact_us" id="last_contact_us">
<p class="footer_contact_us">Contact Us</p>
<p class="footer_contact_us_expl">
Call us to get Nuts and Spices at a best quality <br />
and also at a best price
</p>
</div>
CSS
.centering_the_slider_contents {
margin: auto;
width: 100%;
text-align: center;
margin-top: 10px;
position: absolute;
}
.images_in_nuts {
border-radius: 50%;
width: 250px;
height: 250px;
display: inline-block;
}
.nut_text {
display: inline-block;
vertical-align: top;
margin-top: 30px;
}
.last_contact_us {
background: #ffffff !important;
// margin-top: 300px;
}
.footer_contact_us {
margin-top: 10px;
text-align: center;
font-size: 25px;
font-family: "Poppins";
font-weight: bold;
}
.footer_contact_us_expl {
text-align: center;
font-family: "Poppins";
}
If a margin value of 300px is given then then it gets aligned is that a righ way to do it? is there any solution align these contents one below one without giving a fixed margin? please share if you could help me with a solution
Solution
.centering_the_slider_contents {
margin: auto;
width: 100%;
text-align: center;
margin-top: 10px auto;
/* position: absolute;*/
}
.images_in_nuts {
border-radius: 50%;
width: 250px;
height: 250px;
display: inline-block;
}
.nut_text {
display: inline-block;
vertical-align: top;
margin-top: 30px;
}
.last_contact_us {
background: #ffffff !important;
// margin-top: 300px;
}
.footer_contact_us {
margin-top: 10px;
text-align: center;
font-size: 25px;
font-family: "Poppins";
font-weight: bold;
}
.footer_contact_us_expl {
text-align: center;
font-family: "Poppins";
}<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<!-- About nuts - Slider-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="slider">
<div class="centering_the_slider_contents">
<!-- Nut 1-->
<div class="carousel-item active">
<figure class="images_in_nuts">
<img src="images/almonds.jpg" />
</figure>
<div class="nut_text">
<h2>Almond</h2>
<h3 class="rich_in">Rich In</h3>
<p>
Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
Phosphorus, Magnesium, Copper, <br />
Phytonutrients, specifically flavonoids, plant sterols,<br />
phenolic acids
</p>
</div>
</div>
<!-- Nut 1 Ends-->
<!-- Nut 2-->
<div class="carousel-item">
<figure class="images_in_nuts">
<img src="images/almonds.jpg" />
</figure>
<div class="nut_text">
<h2>Almond 2</h2>
<h3 class="rich_in">Rich In</h3>
<p>
Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
Phosphorus, Magnesium, Copper, <br />
Phytonutrients, specifically flavonoids, plant sterols,<br />
phenolic acids
</p>
</div>
</div>
<!-- Nut 2 Ends-->
<!-- Nut 3-->
<div class="carousel-item">
<figure class="images_in_nuts">
<img src="images/almonds.jpg" />
</figure>
<div class="nut_text">
<h2>Almond 3</h2>
<h3 class="rich_in">Rich In</h3>
<p>
Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
Phosphorus, Magnesium, Copper, <br />
Phytonutrients, specifically flavonoids, plant sterols,<br />
phenolic acids
</p>
</div>
</div>
<!-- Nut 3 Ends-->
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</div>
</div>
</div>
</div>
<!-- Everything Related to nuts ends here - Slider Ends-->
<div class="last_contact_us" id="last_contact_us">
<p class="footer_contact_us">Contact Us</p>
<p class="footer_contact_us_expl">
Call us to get Nuts and Spices at a best quality <br />
and also at a best price
</p>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>- My custom CSS transition animation is not working on hover after I added AOS JS library
- How to set data attributes in HTML elements
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- How to reduce the size of an ASCII text art picture
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- Set element width based on a string that is not in the element
- Where are the trailing commas coming from in these radio buttons?
- 100vh height when address bar is shown - Chrome Mobile
- Capture selected option returns not defined instead
- Adjust navbar minimum height depending on screen width
- How to remove extra width from my website?
- Why doesn't backgroundColor=rgb(a,b,c) work?
- How to put json variable directly into DIV Class
- On hover the div inside button reduces height to give animation and little dark bottom. But text also moving up how to fix not move text
- WOW jquery slider
- Reduce the frequency of geolocation watchPosition calls
- Why should HTML elements (input, textarea, and select) have associated labels?
- Why ngModel doesn't works on the last version of Angular 17?
- How to make an element's background-color a little darker using CSS
- How do I clear the content of a div using JavaScript?
- How do I display images from Google Drive on a website?
- Tailwind h-screen doesn’t work properly on mobile devices
- Edit icon in mobile view missing
- Sticky header input scrolls on input
- Image not loading on local site I made
- React error in index.js, "Uncaught ReferenceError: dom is not defined"
- Make the mix-blend-mode on a sticky navbar ignore certain elements while scrolling down
- How to prevent bleach from escaping > (blockquote) tag used in Markdown
- Why is the input bar spilling slightly on the right side of the container?
- Method to show native datepicker in Chrome