How to prevent text from moving outside the column? - css

In my reactjs component I am returning this in the render():
<div className='col-lg-4'>
<div className="col-lg-3">
<img src={this.props.details.avatar} alt=""/>
</div>
<div className="col-lg-9 text">
<div>
{this.props.details.firstName}
{this.props.details.lastName}
{this.props.details.bio.slice(0,80)}
</div>
</div>
</div>
Currently the this.props.details.bio which contains text overflows into the image. Which css rule can fix this issue? At the moment I have:
.text{
padding:5px;
}
Here is a jsFiddle


The natural size of your image is larger than the bootstrap class that contains it. So what appears like the text bleeding into the image is really the image extending beyond the boundaries of its parent.
To force the image to obey the size of its parent, add this to your CSS:
img {
width: 100%;
height: auto;
}


Please give img-reponsive class in img tag and put col-md and col-sm class. Now img and its description come side by side till 768 screen resolution after that it is in full width.
body {
margin: 10px;
}
.main {
border: 1px solid black;
background-color: lightgrey;
margin: 10px 10px !important;
}
.text {
padding: 5px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
<div>
<div>
<div class="row main">
<h1>Boyer - Botsford</h1>
<h3 class="col-lg-6">clicks-and-mortar scale infomediaries</h3>
<h3 class="col-lg-6 text-right">Since Sat Nov 25 2017 16:55:29 GMT+1100 (AEDT)</h3>
</div>
<div class="row">
<div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/buryaknick/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>DylanMacdonaldAssumenda doloribus ut dolore eaque autem. Sit rem similique cum modi qui. Qui m</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/abdullindenis/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>IsabelRolfsonDicta explicabo pariatur et placeat enim. Dignissimos similique in nesciunt aut </div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/andytlaw/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>AnthonyCartwrightSint cum corrupti similique laudantium nesciunt aliquam sint aperiam. Id consequ</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/longlivemyword/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>LukeWestConsequatur excepturi tempore iste ipsam et architecto animi explicabo. Magnam s</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/dnirmal/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>MaxDietrichQuo dolorum et est facere nihil similique repudiandae. Recusandae ratione enim d</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marosholly/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>AlexanderErnserSit quo dignissimos molestiae quasi ut dolor. Et et quaerat assumenda laborum ea</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/areus/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>AlyssaDanielDolor est id. Officiis aut odio molestiae ut quaerat quae vero ipsa. Voluptatem </div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/alagoon/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>KaiHayesNobis ea ut distinctio nam et suscipit velit. Necessitatibus exercitationem blan</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bertboerland/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>IsabelleClarkeVel velit repellat dicta. Maxime occaecati sed dolorum et modi. Voluptates rerum</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/drewbyreese/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>HaydenWilliamsAt vel voluptatibus rerum ex aut porro. Quis dolorem qui dolorum eveniet a facer</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/markwienands/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>AbigailBorerDoloribus illum nam modi consequuntur unde et et a rerum. Laboriosam quis quod. </div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-3"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/okandungel/128.jpg" alt="" class="img-responsive"></div>
<div class="col-lg-9 col-md-9 col-sm-9 text">
<div>HamishMclaughlinSapiente aliquam consequatur doloribus occaecati dolorem perferendis qui aliquid</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

Related

Is it possible to stack a row below respective column in bootstrap?

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>

How do I correctly offset bootstrap grid columns to center underneath three existing columns?

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 ======= -->

Bootstrap carousel is not working properly

I am trying to use Bootstrap carousel in my website but I am not able to center the content in the carousel. I've tried using Grid but that didn't work out well. How can I solve this problem? Please take a look at my code and the image that has been provided below. I haven't used any CSS yet for the carousel.
<section class="services-about">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card-columns">
<div class="card card-effects">
<img src="./resources/images/data.png" alt="" class="img-fluid card-img-top mx-5"
style="height: 10%; width: 15%;">
<div class="card-body">
<h3 class="card-title text-center" style="color: #686868 !important;">
WEB DEVELOPMENT
</h3>
<hr style="border: .01px solid #333 !important;">
<p class="card-text text-center"
style="color: rgba(255,255,255,.755) !important;">Lorem
ipsu dolor sit amet consectetur adipisicing
elit.
Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
unde
praesentium, quidem soluta incidunt enim dolore veritatis at quis
molestias
corporis
quod inventore porro!</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card-columns">
<div class="card card-effects">
<img src="" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h3 class="card-title text-center" style="color: #686868 !important;">
MARKETING</h3>
<hr style="border: .01px solid #333 !important;">
<p class="card-text text-center"
style="color: rgba(255,255,255,.755) !important;">
Lorem
ipsum dolor sit amet consectetur adipisicing
elit.
Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
unde
praesentium, quidem soluta incidunt enim dolore veritatis at quis
molestias
corporis
quod inventore porro!</p>
</div>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<div class="carousel-item">
</div>
<div class="carousel-item">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
Please check this image to see the carousel problem

You should be able to use position to do that.
If you add:
.carousel-item {
position: relative;
}
.card {
position: absolute;
left: 50%;
top: 50%;
transform: translate(50%, 50%);
}
Your content should get centered in the middle of the slide. :)

Try the below one.. add style="margin:auto" to card
<div class="card" style="width:400px; margin:auto;">
<div class="carousel-caption">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>

Since you are using bootstrap classes:
Trying using d-flex justify-content-center align-items-center on parent div element.
Also, I strongly suggest you stop using css inline styling and put your css into a separate file.

Bootstrap 3 Panels with images

I'm trying to re-create this panel:
I just wondered if anyone knows how I can go about this , I have my html markup done. But I have no idea how I would begin to style it..
My example html:
<div id="mainContainer" class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Item 01</div>
<div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" />
</div>
</div>
</div>
</div>

Check this out this will help you....
.my_panel > .panel-body {
padding: 0px;
}
.my_panel > .panel-body > img {
width: 100%;
height: 100%;
}
.my_panel > .panel-footer {
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="mainContainer" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default my_panel">
<div class="panel-body">
<img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" />
</div>
<div class="panel-footer">
<h3>The company</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, voluptas, sunt vitae mollitia iure perferendis rerum odio! Natus, cupiditate, est, quas, non perspiciatis in quo possimus eos voluptas tempore maxime.</p>
Read More
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How to make horizontal list of bootstrap 3 panels responsive?

I'm using Bootstrap 3 and struggling to make a horizontal list of panels responsive. My HTML is as below. It renders fine in all browsers but on mobile resolution the text is not responsive. Any ideas what I am missing?
<body>
<div class="container">
<div class="row">
<div class="col-xs-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Sprinkler System <br />Test & Inspection</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu.
</div>
</div>
</div>
<div class="col-xs-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Heading for panel</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu.
</div>
</div>
</div>
<div class="col-xs-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Heading for panel</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu.
</div>
</div>
</div>
<div class="col-xs-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Heading for panel</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu.
</div>
</div>
</div>
</div>
</div>
</body>

To make it mobile friendly you should have different column sizes at lower resolution. The words are too long to fit within a col-xs-2. You could keep the 4 columns layout by giving it two classes of col-xs-6 and col-sm-3. Once it gets to the smaller resolution the columns will be re arranged appropriately.
Your divs that contain your panels should have the class changed to look like this in each of them. Will give you a 2 column layout at xs resolution and 4 column layout at small and above
<div class="col-xs-6 col-sm-3">
</div>
If you have issues with the panels not aligning properly on the lower resolution when they are rearranged this might fix the issue:
Bootstrap fluid row columns with different height
You just have to add the css class
.col-xs-6:nth-child(odd) {
clear: both;
}

Resources