i'm using bootstrap 5 and the images are not getting aligned in horizontal way. The image gets added in the lower row. i've tried everything nut it dosent's works. any help would be appriciated.
Thank you.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Body -->
<section>
<div class="container pt-3" class="text1">
<div class="row">
<div class="col-12 text-center ">
<h3> Lots of IT companies in town. Why you should choose us? </h3>
</div>
</div>
</div>
<hr>
</section>
<div class="row">
<div class="col-md-4 text-center">
<img class="img-fluid p-2" src="https://via.placeholder.com/200.jpg" width="150">
<h4 style="font-weight: 700;">Customized requirements</h4>
<p> Every idea is unique and that's we craft it as<br> per your requirements.</p>
</div>
</div>
<div class="col-md-4 text-center">
<img class="img-fluid p-2" src="https://via.placeholder.com/200.jpg" width="150">
<h4 style="font-weight: 700;">Customized requirements</h4>
<p> Every idea is unique and that's we craft it as<br> per your requirements.</p>
</div>
</section>
row div early close
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<section>
<div class="container pt-3" class="text1">
<div class="row">
<div class="col-12 text-center ">
<h3> Lots of IT companies in town. Why you should choose us? </h3>
</div>
</div>
</div>
<hr>
</section>
<div class="container" class="text1">
<section>
<div class="row">
<div class="col-md-4 text-center">
<img class="img-fluid p-2" src="images/our qualities/our_qualities/customized.png" width="150">
<h4 style="font-weight: 700;">Customized requirements</h4>
<p> Every idea is unique and that's we craft it as<br> per your requirements.</p>
</div> <!-- Not Here -->
<div class="col-md-4 text-center">
<img class="img-fluid p-2" src="images/our qualities/our_qualities/customized.png" width="150">
<h4 style="font-weight: 700;">Customized requirements</h4>
<p> Every idea is unique and that's we craft it as<br> per your requirements.</p>
</div>
</div> <!-- Close Here -->
</section>
</div>
Related
Look at the below attached image.
I am trying to create a grid as showing on image using boostrap4. In destop, first column need to be col-5 width and other 3 equal. In mobile 1st col to be col-12 and other 3 equal.
My HTML:
<div class="row">
<article class="col-5">
<h1 class="text-uppercase">Some Contents</h1>
</article>
<article class="col">
<span class="counter">10</span>
</article>
<article class="col">
<span class="counter">10</span>
</article>
<article class="col">
<span class="counter">10</span>
</article>
</div>
This markup is working on destop. but not in mobile. Hope somebody may help me out.
Need to add breakpoints for small devices
.text-uppercase{
background:#f0f0f0
}
.counter{
background:#f0f0f0;
font-size:68px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="row">
<article class="col-md-5 col-sm-12">
<h1 class="text-uppercase">Some Contents</h1>
</article>
<article class="col-md col-sm-4">
<span class="counter">10</span>
</article>
<article class="col-md col-sm-4">
<span class="counter">10</span>
</article>
<article class="col-md col-sm-4">
<span class="counter">10</span>
</article>
</div>
You can do it like this, you have to keep in mind that bootstrap is mobile first.
<div class="row">
<article class="col-12 col-md-6">
<h1 class="text-uppercase">Some Contents</h1>
</article>
<article class="col-12 col-sm-4 col-md-2">
<span class="counter">10</span>
</article>
<article class="col-12 col-sm-4 col-md-2">
<span class="counter">10</span>
</article>
<article class="col-12 col-sm-4 col-md-2">
<span class="counter">10</span>
</article>
</div>
With Bootstrap 4, I am making a horizontal card for classified ad and want in the header to title of the ad to be on the left and price on the right. Using django template:
<section class="card">
<div class="row no-gutters">
<div class="col-sm-4">
<img src="{{ad.thumbnail.url}}" alt="" class="img fluid card-img ad-image-list">
</div>
<div class="col-sm-8">
<div class="card-body">
<header class="d-flex justify-content-between">
<h6>{{ad.title}}</h6>
<h6> {{ad.price}}$ </h6>
<hr>
</header>
<p class="card-text">{{ad.description}}</p>
</div>
</div>
</div>
</section>
I get this:
Why doesnt wanna apply <header class"d-flex justify-content-between"> ?
Because you're using <hr> in flex container and <hr> going to right. Just remove the hr inside header.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<section class="card">
<div class="row no-gutters">
<div class="col-sm-4">
<img src="https://picsum.photos/id/536/354" alt="" class="img fluid card-img ad-image-list">
</div>
<div class="col-sm-8">
<div class="card-body">
<header class="d-flex justify-content-between">
<h6>Title</h6>
<h6>Price</h6>
</header>
<hr>
<p class="card-text">{{ad.description}}</p>
</div>
</div>
</div>
</section>
The order column directive in the following code works when I resize the browser window to mobile width. However, when I run it in mobile emulator or actual mobile device, the order columns are not working. This is due to #media queries not working on mobile. Other solutions on the forum is recommending use of
<meta name="viewport" content="width=device-width,initial-scale=1.0">
However, that meta tag is not helping here.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-center py-8 py-md-11">
<div class="col-12 col-md-12 col-lg-5 mt-2">
<div class="d-flex">
<div>
<h3>
Feature 1
</h3>
<p>
sometext
</p>
</div>
</div>
<div class="d-flex">
<div>
<h3>
Feature 2
</h3>
<p>
sometext
</p>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-lg-7 order-sm-first order-md-first order-lg-last">
<div class="mb-8 mb-md-0">
<div id="native-awesome-landing-page-tools" class="img-fluid img-animation lottie shadow-dark">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/2/20/Eglinton_Valley_NZ_01.jpg" />
</div>
</div>
</div>
</div>
<div class="row align-items-center py-8 py-md-11">
<div class="col-12 col-md-12 col-lg-7">
<div class="mb-8 mb-md-0">
<img class="img-fluid" src="https://miro.medium.com/max/3000/1*MI686k5sDQrISBM6L8pf5A.jpeg" />
</div>
</div>
<div class="col-12 col-md-12 col-lg-5 mt-2">
<div class="d-flex">
<div>
<h3>
Feature 1
</h3>
<p>
sometext
</p>
</div>
</div>
<div class="d-flex">
<div>
<h3>
Feature 2
</h3>
<p>
sometext
</p>
</div>
</div>
</div>
</div>
Feature 1
sometext
Feature 2
sometext
The code should be entered just after the <head> tag.
I want the three images to be side-by-side (on desktop), with the headings and paragraph text to be beneath each respective image.
Does anyone know why it wouldn't be working for me? I presume my code is incorrect somehow
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="portfolio-container">
<section class="portfolio">
<div class="row">
<div class="col-12 my-5">
<h2 class="text-uppercase">Portfolio</h2>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/whiskey-drop.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Whiskey Drop</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>An e-commerce website for a premium whiskey service.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/rosie-odenkirk.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Resume</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>A responsive and user friendly resume showcasing a sample candidate in the best light possible.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 d-md-none d-lg-block col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/flappy-bird.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Flappy Bird</h3>
<h4>Python and Django</h4>
<p>A fun and interactive game where you are in control of a bird as you navigate through tight spaces.</p>
</div>
</div>
</div>
You are creating a new row for every item
Instead, put the col's in one row:
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
You don't need a new <div class="row"></div> around every <div class="col-lg-4"></div>. You can just wrap it around the entire lot to clear the floats.
<div class="row">
<div class="col-12 my-5">
<h2 class="text-uppercase">Portfolio</h2>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/whiskey-drop.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Whiskey Drop</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>An e-commerce website for a premium whiskey service.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/rosie-odenkirk.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Resume</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>A responsive and user friendly resume showcasing a sample candidate in the best light possible.</p>
</div>
</div>
</div>
<div class="col-12 d-md-none d-lg-block col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/flappy-bird.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Flappy Bird</h3>
<h4>Python and Django</h4>
<p>A fun and interactive game where you are in control of a bird as you navigate through tight spaces.</p>
</div>
</div>
</div>
</div>
Also make sure that you wrap your height and width values with "" too.
How do I place multiple images side by side in a Bootstrap Card?
It should be multiple pictures, but only one title header and description.
In my code, the images start crossing over and intersecting each other.
Eventually, I'd like to use an array of pictures (two or more) and combine them with JavaScript.
The card can be as wide as needed.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center">
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo">
</div>
</div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card" style="width: 50rem;">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<div cardcheckbox id="checkboxdiv">
<input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
</div>
<div class="well text-center">
<div class="col-md-12">Sister Properties:</div>
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo">
</div>
</div>
</div>
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
Tree
</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
Oak Tree with leaves in grassy picture with sunset
</div>
</div>
</div>
</div>
</div>
You might find Bootstrap's image-fluid class useful.
Images in Bootstrap are made responsive with .img-fluid.
max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
Responsive images
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center">
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid">
</div>
</div>
</div>
Here's your second version with the checkbox.
You might consider using max-width instead of width to keep the card responsive.
.card {
max-width: 50rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<div cardcheckbox id="checkboxdiv">
<input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
</div>
<div class="well text-center">
<div class="col-md-12">Sister Properties:</div>
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid">
</div>
</div>
</div>
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">Tree</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
Oak Tree with leaves in grassy picture with sunset
</div>
</div>
</div>
</div>
</div>