I am currently using bootstrap 4 for the cards. I would like to add a numbering beside my card. which is show in the image below.
I tried adding padding-top on the span text the same goes with the assigned col of the span text but the card beside it is adjusting as well. Can anyone help me with this one?
I want the numbering to be at the horizontal range of the card either at the top or at the middle, as you can see it's above the card.
<div class="container">
<div class="col-sm-2">
<span style="display:inline-block; padding-top: 15px;" >1</span>
</div>
<div class="col-sm-12">
<div class="card h-100" style="width: 15rem;">
<div>
<a class="fancybox" href="admin/files/Images/flutterfest.png">
<img class="card-img-top" src="admin/files/Images/flutterfest.png">
</a>
</div>
<div class="card-body">
<h5 class="card-title text-center">Library Management System</h5>
<p class="card-text">Date added: <span>May 23, 2021</span></p>
</div>
</div>
</div>
</div>
give column classes as col-sm-2 and col-sm-10. there are 12 columns max you can create in bootstrap. So you have given col-sm-12 to second div thats why it is going to next line
<div class="col-sm-2">
<span style="display:inline-block; padding-top: 15px;" >1</span>
</div>
<div class="col-sm-10">
Related
I want to create cards in a loop runtime but the card show vertically align eachother i gave the col-md-4 but it didnot work
enter code here
<div class="row-fluid border mt-3">
<div *ngFor="let data of allWidgets">
<div class="col-md-4 border mt-3">
<div class="card">
<div class="img1">
<img src="https://images.havenly.com/unsafe/550x334/filters:quality(50)/https://s3.amazonaws.com/static.havenly.com/assets/2a35d539-e889-405e-b495-815aa33f65ea" alt="">
</div>
<div class="img2">
<img src="https://images.havenly.com/unsafe/180x180/filters:quality(50)/https://s3.amazonaws.com/havenlydesignerphotos/13078-profile-eb69eheadshot02.jpg" alt="">
</div>
<div class="mian-text mt-0">
<p>{{data.name}}</p>
<p><small>{{data.description}} </small> </p>
View Profile <span style="color: lightgray;">|</span> Select Cherise
</div>
</div>
</div>
</div>
you must use the ngFor not on the first div but on the second like this :
<div class="col-md-4 border mt-3" *ngFor="let data of allWidgets">
this is the solution of your problem.
if you want to create a good angular card you must see:https://mdbootstrap.com/docs/angular/
is the most used site in angular.
have a nice day :)
I have a bootstrap row on my page that's divided into three columns. I wanted to add some space between the 3 columns and split each individual column internally into 2 parts. After extensive Googling, this is what I arrived on
<div class="container row h-100 mx-auto" style="margin-top: -60px;">
<div class="col-sm-4 ">
<div class="mx-3">
<div class="" style="width:50%; float: right;">
<h4>About Us</h4>
<p>Find out more about our team of working professionls</p>
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="mx-3 rounded">
<div style="width: 50%; float: left;">
<i class="fa fa-users" aria-hidden="true"></i>
</div>
<div style="width: 50%; float: right;">
<h4>Our Purpose</h4>
<p>Come up with some stuff to be put in here</p>
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="mx-3">
<h4>Our products and services</h4>
<p>Check out our vast array of products and services that we offer.</p>
</div>
</div>
</div>
Here's how it looks:
Ignore the three blue lines, that is experimental code.
Now it all works fine except I can't add a background colour to my columns. Every time I try adding any colour, it just doesn't show up. I write the line something like this:
<div class="mx-3 rounded" style="background: red;">
Now apart from this, I have a .card class defined in my main CSS file, it goes as follows:
.card{
border-radius: 15px;
}
That's it. Adding this class gives a rounded edge to a div (column) and adds a white background. However, every time I do that, the spacing is gone and the content inside my columns just sticks to the left instead of floating left and right.
How can I add a background to these columns without breaking any formatting? Or does anyone have an idea what's going on here?
First of all, I would suggest you should only have rows inside containers. If you put .container and .row together, the Bootstrap grid system doesn't work anymore because rows don't have the flexbox container parent.
Secondly, if you want 2 columns internally, why not declare a row and 2 columns? You've used that to create 3 column outer layout already. Using inline styles with floats defeat the purpose of using Bootstrap flexbox style grid system:
<div class="rounded">
<div class="row">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
</div>
You can also utilize the built-in .card class to help you with the paddings:
<div class="row">
<div class="col-sm-4">
<div class="card border-0">
<div class="card-body">
<div class="row">
<div class="col-6"></div>
<div class="col-6">
<h4 class="card-title">Our Purpose</h4>
<p class="card-text">
...
</p>
</div>
</div>
</div>
</div>
</div>
</div>
To add background color to the .card, it's as easy as putting background color classes in:
<div class="card border-0 bg-danger">
...
</div>
demo: https://jsfiddle.net/davidliang2008/ed8bav14/36/
So I'm using bootstrap to create an index home page
what I'm trying to do is basically align in the center 2 divs on top of each other :
I have a container-fluid
then a row with 2 cols: in 1 of the cols I have 2 divs that I want to be aligned in the center ( both horizontally and vertically ),
( code is shown below )
here's an illustration :
what I want to do
green is the container-fluid ||
red and blue are the divs I want to be aligned || an orange is a login form I want to add later on
my code goes like this :
<div class="container-fluid mainwrapper p-2">
<div class="row">
<div class="col">
<div>
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
<div>
<a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
</div>
</div>
<div class="col">
<!-- Login form here -->
</div>
</div>
</div>
here's a real picture of the problem
i want the green logo and the writing with the white background to be aligned in the center of the left column
real problem
what I realy want
Add text-center class to divs you want to align center. Shown in below code
<div class="col">
<div class="text-center">
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
<div class="text-center">
<a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
</div>
</div>
This will solve your problem..
add these steps:
HTML
<div class="text-center">
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
css
.col {
padding-left:50px;
}
you can just give "col-md-6" to with column and a "text-align:center;" (horizontal align), and "margin:0 auto". Try this.
<div class="container-fluid mainwrapper p-2">
<div class="row">
<div class="col-md-6" style="text-align:center;">
<div style="float: none; margin: 0 auto;">
<div>
<img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>
<div>
<a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
</div>
<div>
</div>
<div class="col-md-6">
<!-- Login form here -->
</div>
</div>
</div>
I have the following html code to place an image next to div as in facebook comments:
<div className="row">
<div className="col-sm-1">
<img
className="img-thumbnail"
src="image.jpg" />
</div>
<div className="col-sm-11">
<div className="bg-light rounded p-1 pl-2">
<span className="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
However, this use of grid creates a space in the first div (col-sm-1) since the image size is smaller than the allotted width on the div. You can see the problem visually below. Any suggestions to mitigate this?
UPDATE
When using col-sm-auto, there is always a space left from the right because of col-sm-11, as you can see in the image:
You can use col-sm-auto instead of col-sm-1 which will shrink the column to the width of the content (the image). Also remove the left or right padding on the columns.
https://www.codeply.com/go/SLirjy4KDw
<div class="container">
<div class="row">
<div class="col-sm-auto pr-0">
<img class="img-thumbnail" src="//placehold.it/40">
</div>
<div class="col-sm-11 pl-0">
<div class="bg-light rounded p-1 pl-2">
<span class="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
</div>
You can use two div with d-inline as class. As these spaces will disappear
https://getbootstrap.com/docs/4.3/utilities/display/
I'm working on my own project.My menu have 6 buttons.
I did it with Bootstrap but when i open in Iphone web browser, the menu comes one row - one button.
I want to show two buttons for a row.
Maybe i can't explain my problem, so i added a screenshot.
here is the image;
1
Thanks for everything,
here is my code below;
<div class="box first">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="center">
<a href="orders.php"><img src="img/logo/siparis.png" width="78px" height="78px">
<h4 style="text-align:center">Sipariş takibi</h4></a>
</div>
</div>
<!--/.col-md-4-->
<div class="col-md-4 col-sm-6">
<a href="http://www.example.com/example-sifre-yenileme.html">
<div class="center">
<img src="img/logo/email_unut.png" width="78px" height="78px">
<h4 style="text-align:center">Şifre değiştirme</h4></a>
</div>
</div>
<!--/.col-md-4-->
<div class="col-md-4 col-sm-6">
<div class="center">
<a href="orderhasar.php"> <img src="img/logo/hasar.png" width="78px" height="78px">
<h4 style="text-align:center">Hasarlı sipariş destek talebi</h4></a>
</div>
</div>
<!--/.col-md-4-->
</div>
<!--/.row-->
</div>
You mean you want all the menu items to show side by side horizontally?
If so, you need to add a XS class declaration for mobile:
<div class="col-md-4 col-sm-6 col-xs-2">
With col-xs-2, it will fit 6 items in a row (12 total columns, 2 columns per menu item, 6 menu items).
You might have to play with the size of the items then!
EDIT:
To show a 2 button row, add col-xs-6 instead.
<div class="col-md-4 col-sm-6 col-xs-6">