Hello i am stuck in this problem. I have 2 Rows and 4 Columns ( col-md-8 & col md-4 in each row).
Structure is like below (also attached screenshot and code):
Inside container
Row 1 Column 1 (md-8) Row 1 Column 2 (md-4) [Accordion]
Row 2 Column 1 (md-8) Row 2 Column 2 (md-4)
The Column 2 of Row 1 is accordion and when it is expanded it takes whole row 2 with it but i want it to take just column below it which is Row 2 Column 2
See the attached images to have a better understanding:
R2C1 has already space greater than R2C2
When accordion is expanded R2C1 gets too much extra space as compared to R2C2
Is there any thing i am missing or fix this? Thank you.
Here is the code demo
https://stackblitz.com/edit/bootstrap-5-q5cctv?file=src%2Findex.html
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<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">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-12">
<span class="fw-1">Row 1 Column 1</span>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-3">
<span>R1 C2</span>
<!-- <i class="bi bi-printer-fill"> bi bi-envelope-at-fill </i> -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Photo Editing,.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
second item's accordion body. Let's imagine this being filled with some
actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseThree"
aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
third item's accordion body. Nothing more exciting happening here in terms
of content, but just filling up the space to make it look, at least at first
glance, a bit more representative of how this would look in a real-world
application.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-12">
<span class="fw-1">Row 2 Column 1</span>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-3">
<span>R2 C2</span>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="pt-3 mt-4 text-muted border-top">
© 2023
</footer>
</div>
<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 src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js"
integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
crossorigin="anonymous"></script>
</body>
</html>
If you don't want the content in second row pushed down after the accordion show, you shouldn't put them on different rows.
Inside container you can use structure like this:
<div class"row">
<div class="col-8">
<div>Some content here</div>
<div>Some content here</div>
</div>
<div class="col-4">
<div>Some content here</div>
<div>Some content here</div>
</div>
</div>
Please note that I removed structures like this:
<div class="row">
<div class="col-12">
Some content here
</div>
</div>
because they are not needed here and you should use flexbox wisely.
Code snippet below, you can run it full page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<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">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="mt-4 p-5 bg-white rounded-3">
<span class="fw-1">Row 1 Column 1</span>
<hr class="my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
<div class="mt-4 p-5 bg-white rounded-3">
<span class="fw-1">Row 2 Column 1</span>
<hr class="my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
<div class="col-md-4">
<div class="mt-4 p-5 bg-white rounded-3">
R1 C2
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Photo Editing,.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
second item's accordion body. Let's imagine this being filled with some
actual content.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseThree"
aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
third item's accordion body. Nothing more exciting happening here in terms
of content, but just filling up the space to make it look, at least at first
glance, a bit more representative of how this would look in a real-world
application.
</div>
</div>
</div>
</div>
</div>
<div class="mt-4 p-5 bg-white rounded-3">
R2 C2
<hr class="my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
<footer class="pt-3 mt-4 text-muted border-top">
© 2023
</footer>
</div>
<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 src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js"
integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
crossorigin="anonymous"></script>
</body>
</html>
Related
I'm trying to achieve the following container grid layout below using Bootstrap 4, which will give me three evenly spaced boxes with another two following underneath evenly centered and spaced:
Here is my code:
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container">
<div class="section-title">
<span>Services</span>
<h2>Services</h2>
<p>We are experts in delivering the following services.</p>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 d-flex align-items-stretch" data-aos="fade-up">
<div class="icon-box">
<div class="icon"><i class="bx bxl-dribbble"></i></div>
<h4>Service one</h4>
<p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="150">
<div class="icon-box">
<div class="icon"><i class="bx bx-file"></i></div>
<h4>Service two</h4>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="300">
<div class="icon-box">
<div class="icon"><i class="bx bx-tachometer"></i></div>
<h4>Service three</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="450"></div>
<div class="icon-box">
<div class="icon"><i class="bx bx-world"></i></div>
<h4>Service four</h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="450"></div>
<div class="icon-box">
<div class="icon"><i class="bx bx-slideshow"></i></div>
<h4>Service five</h4>
<p>Quis consequatur saepe eligendi voluptatem consequatur dolor consequuntur</p>
</div>
</div>
</div>
</div>
<!-- ======= End of Services Section ======= -->
Here is what my code visually looks like:
I don't know where I'm going wrong?
Two mistakes:
Card 4 and 5 were outside of the row.
Card 4 and 5 didn't have any content (the content was outside of the card).
Add d-flex justify-content-center to the row to center the cards.
See the snippet below.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container">
<div class="section-title">
<span>Services</span>
<h2>Services</h2>
<p>We are experts in delivering the following services.</p>
</div>
<div class="row d-flex justify-content-center">
<div class="col-lg-4 col-md-6 d-flex align-items-stretch" data-aos="fade-up">
<div class="icon-box">
<div class="icon"><i class="bx bxl-dribbble"></i></div>
<h4>Service one</h4>
<p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="150">
<div class="icon-box">
<div class="icon"><i class="bx bx-file"></i></div>
<h4>Service two</h4>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="300">
<div class="icon-box">
<div class="icon"><i class="bx bx-tachometer"></i></div>
<h4>Service three</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="450">
<div class="icon-box">
<div class="icon"><i class="bx bx-world"></i></div>
<h4>Service four</h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="450">
<div class="icon-box">
<div class="icon"><i class="bx bx-slideshow"></i></div>
<h4>Service five</h4>
<p>Quis consequatur saepe eligendi voluptatem consequatur dolor consequuntur</p>
</div>
</div>
</div>
</div>
</section>
<!-- ======= End of Services Section ======= -->
Fairly new to web development. I am attempting to make a responsive website for both mobile and desktop. I'll be honest, its terrible right now. But I'm working on it. I currently have 2 major issues that I've been fighting with for about a full day now. Also Yes I am running django on the backend and vue as a cdn on the front.
I have deployed rellax js into the website for a paralax effect however its creating an ugly overlap and I can't seem to get ride of it.
Once I deployed rellax js my text that was supposed to be center of the landing page disappeared to the bottom. I would like it centered.
Could anyone help me with these issues? Also any input as to how to make this mobile friendly would be awesome, I was just going to lock the images at a certain size if the screen was small.
HTML
{% include 'core/navbar.html' %} {% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static "css/style.css" %}" />
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link href="assets/vendor/aos/aos.css" rel="stylesheet" />
<link
href="assets/vendor/bootstrap/css/bootstrap.min.css"
/>
<link
href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
/>
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet" />
<link
href="assets/vendor/glightbox/css/glightbox.min.css"
rel="stylesheet"
/>
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css"
/>
<title>Tester Site</title>
</head>
<body>
<section id="hero" class="d-flex align-items-center">
<div id="bg">
<div class="bg">
<img src="{% static "media/ocean.png" %}" class="bg" alt="" data-rellax-speed="2" data-rellax-percentage="0.5" />
<img src="{% static "media/girl.png" %}" class="girl" data-rellax-speed="7" data-rellax-percentage="0.5" style="top: -195px; height: 1000px; width: auto;" />
</div>
</div>
<div
class="col-sm-2"
data-aos="zoom-in"
data-aos-delay="100"
>
<h1>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
<span class="blast" aria-hidden="true" style="opacity: 1">x</span>
<span class="blast" aria-hidden="true" style="opacity: 1">p</span>
<span class="blast" aria-hidden="true" style="opacity: 1; padding-right: 8px">l
</span>
<span class="blast" aria-hidden="true" style="opacity: 1">o</span>
<span class="blast" aria-hidden="true" style="opacity: 1">r</span>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
</h1>
<h2>
<span class="blast" aria-hidden="true" style="opacity: 1">C</span>
<span class="blast" aria-hidden="true" style="opacity: 1">r</span>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
<span class="blast" aria-hidden="true" style="opacity: 1">a</span>
<span class="blast" aria-hidden="true" style="opacity: 1">t</span>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 3px"
>e</span
>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 5px"
>a</span
>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 5px"
>
<div id="container">
<div id="text"></div>
<div id="cursor"></div>
</div>
</span>
</h2>
About Me
</div>
</section>
<footer id="footer" data-rellax-speed="10" data-rellax-percentage="-1.0"></footer>
<section id="about" class="about">
<div class="container" data-aos="fade-up">
<div class="section-title">
<br>
<h2>
<span>A</span>
<span>b</span>
<span>o</span>
<span>u</span>
<span>t</span>
</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row">
<div class="col-lg-4">
<img src="https://webp.bearsofficialsstore.com/237169917.webp" class="img-fluid" alt="">
</div>
<div class="col-lg-8 pt-4 pt-lg-0 content">
<h3>Illustrator & UI/UX Designer</h3>
<p class="fst-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<div class="row">
<div class="col-lg-6">
<ul>
<li><i class="bi bi-rounded-right"></i> <strong>Birthday:</strong> 1 May 1995</li>
<li><i class="bi bi-rounded-right"></i> <strong>Website:</strong> www.example.com</li>
<li><i class="bi bi-rounded-right"></i> <strong>Phone:</strong> +123 456 7890</li>
<li><i class="bi bi-rounded-right"></i> <strong>City:</strong> City : New York, USA</li>
</ul>
</div>
<div class="col-lg-6">
<ul>
<li><i class="bi bi-rounded-right"></i> <strong>Age:</strong> 30</li>
<li><i class="bi bi-rounded-right"></i> <strong>Degree:</strong> Master</li>
<li><i class="bi bi-rounded-right"></i> <strong>PhEmailone:</strong> email#example.com</li>
<li><i class="bi bi-rounded-right"></i> <strong>Freelance:</strong> Available</li>
</ul>
</div>
</div>
<p>
Officiis eligendi itaque labore et dolorum mollitia officiis optio vero. Quisquam sunt adipisci omnis et ut. Nulla accusantium dolor incidunt officia tempore. Et eius omnis.
Cupiditate ut dicta maxime officiis quidem quia. Sed et consectetur qui quia repellendus itaque neque. Aliquid amet quidem ut quaerat cupiditate. Ab et eum qui repellendus omnis culpa magni laudantium dolores.
</p>
</div>
</div>
</div>
</section><!-- End About Section -->
<!-- ======= Skills Section ======= -->
<section id="skills" class="skills">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Skills</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row skills-content">
<div class="col-lg-6">
<div class="progress">
<span class="skill">Video Editing <i class="val">100%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Photoshop <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Audio Editing <i class="val">75%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="progress">
<span class="skill">Content Creation <i class="val">80%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">WordPress/CMS <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Skills Section -->
</div>
</template>
<br>
<br>
<br>
<br>
<!-- End Hero -->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14"></script>
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax#master/rellax.min.js"></script>
<script>
// Center all the things!
var rellax = new Rellax('.girl', {
center: false
});
var rellax = new Rellax('.bg', {
center: true
});
</script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
-->
<script>
var _CONTENT = [
"Simple Life",
"Meaningful life",
"Positive Life",
"masterpiece"
];
// Current sentence being processed
var _PART = 0;
// Character number of the current sentence being processed
var _PART_INDEX = 0;
// Holds the handle returned from setInterval
var _INTERVAL_VAL;
// Element that holds the text
var _ELEMENT = document.querySelector("#text");
// Cursor element
var _CURSOR = document.querySelector("#cursor");
// Implements typing effect
function Type() {
// Get substring with 1 characater added
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_PART_INDEX++;
// If full sentence has been displayed then start to delete the sentence after some time
if(text === _CONTENT[_PART]) {
// Hide the cursor
_CURSOR.style.display = 'none';
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 60);
}, 1000);
}
}
// Implements deleting effect
function Delete() {
// Get substring with 1 characater deleted
var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
_ELEMENT.innerHTML = text;
_PART_INDEX--;
// If sentence has been deleted then start to display the next sentence
if(text === '') {
clearInterval(_INTERVAL_VAL);
// If current sentence was last then display the first one, else move to the next
if(_PART == (_CONTENT.length - 1))
_PART = 0;
else
_PART++;
_PART_INDEX = 0;
// Start to display the next sentence after some time
setTimeout(function() {
_CURSOR.style.display = 'inline-block';
_INTERVAL_VAL = setInterval(Type, 120);
}, 200);
}
}
// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);
</script>
</body>
</html>
Image 1
Image 2 after scrolling down
as you can see the background image that is being scrolled over is popping out on the other side and looks nasty. Any idea how to fix that?
You can also see how the about btn and the txt are all right there at the bottom and not at the top and centered where I am trying to put them.
Any help would be amazing!!
I'm trying to upgrade my site from Bootstrap 3 to Bootstrap 4. When I changed to Bootstrap 4, now a URL that is inside the modal-body exceeds the width of the modal. As far as I can tell the syntax of the modal is correct for Bootstrap 4, so I'm not sure why the modal width isn't stretching to fit the URL like it did in Bootstrap 3.
Here is a screenshot with the URL circled in yellow: URL too wide
Here is the code:
<?php
echo "<div class='modal fade' id='$p->fldHref' tabindex='-1' role='dialog' aria-labelledby='$p->fldModalLabel'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h3 class='modal-title' id='$p->fldModalLabel'>$p->fldModalTitle</h3>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>
</div>
<div class='modal-body'>
<p>".html_entity_decode($p->fldModalBody)."</p>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default btn-sm' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>"
?>
use whitespace css property. here is an example: https://www.w3schools.com/cssref/pr_text_white-space.asp
here is playground: https://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre
Check what is specified on your code with inspect element and try with whitespace -> It should solve
Use CSS word-break: break-word; for .modal-body and to do that add another class with it (.modal-body) or better if you add another div inside and use word-break: break-word; in that (like the snippet below), whenever you do word-break: break-word; could be the solution-
.modal-body-content {
word-break: break-word
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, quasi quidem magnam?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body-content">
<p>Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Quo amet, ullam aliquam!</p>
<p>Excepturi magnam, rerum explicabo dolorum vel quo, qui! Necessitatibus non nulla, nostrum.</p>
https://www.google.com/search?q=pgbjr+oijfgboiwn+ogmn+wigj+oiwm+igjbioijeaifo+i+ijerijkoferfgjo&rlz=1C1CHBD_enBD924BD924&oq=pgbjr+oijfgboiwn+ogmn+wigj+oiwm+igjbioijeaifo+i+ijerijkoferfgjo&aqs=chrome..69i57.4620j0j7&sourceid=chrome&ie=UTF-8
<p>Ipsa cumque dignissimos odio optio deleniti ab, iste consequuntur rerum, obcaecati repellat?</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
In my Angular 8 app I have a PrimeNG DataView element. In this element, simple I would add a row with the name of the fields at the bottom of the header.
So, I tried to add a <div> tag in every possible position of the html code of this component to understand how to do and: or this tag was too hight (it was visible, but not at the bottom of the header, but i.e. between search row and paginator row), or it was hidden. It was impossible to me, add a div tag in correct position, making this div visible.
I attach an image (please, consider the only point 1) and the code.
<p-header>
<div class="ui-helper-clearfix">
<div class="ui-g">
<div class="ui-g-12 ui-md-4">
<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By" (onChange)="onSortChange($event)" [style]="{'min-width':'140px'}"></p-dropdown>
</div>
<div class="ui-g-6 ui-md-4 filter-container">
<div style="position:relative">
<input type="search" pInputText placeholder="Search by brand" (input)="dv.filter($event.target.value)">
</div>
</div>
<div class="ui-g-6 ui-md-4" style="text-align:right">
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
</div>
</div>
<!-- A div at this exact position is visibile but is not at the bottom of header -->
</div>
<!-- A div at this exact position, maybe the better and more logic one, is unvisible -->
</p-header>
<!-- End of the header, start of data row; a div at this exact position is unvisible -->
<ng-template let-person pTemplate="listItem">
<div class="ui-g-12">
<div class="car-details">
<div>
<div class="ui-g">
<div class="ui-g-12">Vin: <b>{{person.id}}</b></div>
<div class="ui-g-12">Year: <b>{{person.name}}</b></div>
<div class="ui-g-12">Brand: <b>{{person.surname}}</b></div>
<div class="ui-g-12">Color: <b>{{person.officeNumber}}</b></div>
</div>
</div>
<button pButton type="button" icon="pi pi-search" (click)="selectPerson($event, person)"></button>
</div>
</div>
</ng-template>
As per my understanding from your question, I have added a row for you. Please see the screenshot for reference. For your convenience I have highlighted in lightblue background color.
To Achieve this: In your component.html Please see the lorem block
<p-dataView
#dv
[value]="cars"
[paginator]="true"
[rows]="20"
paginatorPosition="both"
filterBy="brand"
[sortField]="sortField"
[sortOrder]="sortOrder"
>
<p-header>
<div class="ui-helper-clearfix">
<div class="ui-g">
<div class="ui-g-12 ui-md-4">
<p-dropdown
[options]="sortOptions"
[(ngModel)]="sortKey"
placeholder="Sort By"
(onChange)="onSortChange($event)"
[style]="{ 'min-width': '140px' }"
></p-dropdown>
</div>
<div class="ui-g-6 ui-md-4 filter-container">
<div style="position:relative">
<input
type="search"
pInputText
placeholder="Search by brand"
(input)="dv.filter($event.target.value)"
/>
</div>
</div>
<div class="ui-g-6 ui-md-4" style="text-align:right">
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
</div>
<div class="ui-g white-bg">
<div class="ui-g-6 ui-md-4">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Accusamus cupiditate dolores esse id ipsam omnis
reiciendis repellat, temporibus voluptas? Consequuntur
dolor inventore natus, porro quis tempore veniam.
Consectetur consequatur deleniti esse ex molestiae rem
sed temporibus voluptates! Ad aliquam, aspernatur cum
cumque fugiat harum ipsa, ipsam laudantium modi nemo
perferendis perspiciatis quis, quos rerum veritatis?
</div>
</div>
</div>
</div>
</p-header>
Step 2: In your component.css:
:host ::ng-deep {
.white-bg {
background-color: lightskyblue;
}
}
You can follow the same approach if you want to display the row below the pagination.
I need to place an image outside the container, so that the right margin stays the default container (responsive), and the image always stays together with a button.
Follow the image below to exemplify:
I tried to use container-fluid (Example 2 - using container-fluid in html), but I can't use the same margin as the container on the right side. I can change by css, but would have to change for all breakpoints, has another way?
I tried to use the container itself (Example 3 - using container and margin-left: 0px in html) and remove the margin-left without success.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Examples</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<h2>Example 1</h2>
<div class="">
<div class="container">
<div class="row">
<div class="col-6 row">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
<div class="ex1 mt-5">
<h3>Example 2 - using container-fluid</h3>
<div class="container-fluid">
<div class="row">
<div class="col-6 row">
<img src="https://via.placeholder.com/200" alt="">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
<div class="mt-5">
<h3>Example 3 - using container and margin-left: 0px</h3>
<div class="container" style="margin-left: 0px">
<div class="row">
<div class="col-6 row">
<img src="https://via.placeholder.com/200" alt="">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
</body>
</html>
Would anyone know any way to do it without me having to change this margin-right on all breakpoints?
I don't think you can do this in bootstrap.
If you give your button position:relative then it will no longer flow with the rest of the grid and can always be to the right of the image/text
https://www.w3schools.com/css/css_positioning.asp
is a good tutorial on different position options
Well you can always make use of
display: flex;
which would allow do what you have above easily.
Checkout how to use flex