I added the bootstrap class to make image circle using the .rounded-circle class for image and for the buttons i tried using .rounded-pills class but nor is my picture becoming cirular and nor is button becoming pill shaped. i tried using the input tag too for the button but it isnt working.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row mt-2">
<div class="col-md-6">
<img src="123.jpg" class="rounded-circle mt-2" width="204" height="118">
<p class="p1">Sometext here <br/><span class="percent">90%</span> off <br/>
<button type="button" class="btn btn-primary btn-lg button1 rounded-pill"> Order Now <i class="bi bi-cart-fill i1"></i></button>
</p>
</div>
</div>
Button class and Ringing class both are working
I've tried several variations based on search results and StackOverflow results and referenced existing code.
With this code
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="table-row row d-flex flex-column align-items-center">
<div class="col">
<span class="align-middle">
<button type="submit" class="searchbtn emailRemoveBtn float-start align-self-center" name="command" value="Delete email #i">
<i class="fa-solid fa-xmark sm"></i>
<span aria-hidden="true"></span>
</button>
<input readonly class="align-self-center" style="border-style: hidden;" />
</span>
</div>
</div>
The emails don't vertically center as shown here:
I'm new to this and it's probably something small. Do you see what I'm missing to center the emails vertically?
Don't use flexbox and floats together.
Don't use floats at all, except to wrap text around images. They're not for structural layout, just for content layout.
Don't introduce table row layout here (unless you actually have tabular data).
Don't use rows and explicit flex layout. Bootstrap 5 rows already have flexbox applied, but they require containers and columns, which you apparently don't need here, having only one column per row. You could apply the same principles to grid rows, though.
justify-content aligns content along the primary flex axis, not align-items.
Bootstrap provides border classes which you can use to remove border. Custom styles should be put on custom classes anyway, not in the markup.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="d-flex flex-column justify-content-center mt-1 py-2 bg-secondary">
<div class="text-center">
<button type="submit" class="btn btn-primary searchbtn emailRemoveBtn" name="command" value="Delete email #i">
<i class="fa-solid fa-xmark sm"></i>
<span aria-hidden="true"></span>
</button>
<input readonly class="align-self-center border-0" />
</div>
</div>
<div class="d-flex flex-column justify-content-center mt-1 py-2 bg-secondary">
<div class="text-center">
<button type="submit" class="btn btn-primary searchbtn emailRemoveBtn" name="command" value="Delete email #i">
<i class="fa-solid fa-xmark sm"></i>
<span aria-hidden="true"></span>
</button>
<input readonly class="align-self-center border-0" />
</div>
</div>
I'm having some real trouble trying to align icons within their divs. Nothing I try works whether it be creating custom CSS or trying to use bootstrap's text-align-center.
Here's a cut down example of the navbar:
<div id="appSidenav" class="sidenav">
<button class="closebtn btn" id="navClose" onclick="closeNav()"><i class="fas fa-chevron-left"></i></button>
<button class="openbtn btn" id="navOpen" onclick="openNav()"><i class="fas fa-bars"></i></button>
<a href="#" class="pt-3">
<div class="row">
<div class="col-2">
<i class="fas fa-home"></i>
</div>
<div class="col">
<span>Home</span>
</div>
</div>
</a>
<a href="#">
<div class="row">
<div class="col-2">
<i class="fas fa-users"></i>
</div>
<div class="col">
<span>Contacts</span>
</div>
</div>
</a>
</div>
I've tried to add text-center to the cols, I've also tried adding text-align: center; to the CSS but nothing seems to make any difference. I've also tried different sized cols and cols with no padding or margin.
I've tried adding an alignment to pretty much every tag or class and nothing works.
Any ideas?
Thanks!
UPDATE
Nobody seems to quite understand what I'm getting at, so I'll post a picture.
I've tried to align the icons using both CSS and bootstrap classes. I can live with it I guess but it's a bit annoying. Here's what's happening:
I don't understand what you mean exactly,
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome 5 Icons</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>
<div id="appSidenav" class="sidenav">
<button class="closebtn btn" id="navClose" onclick="closeNav()"><i class="fas fa-chevron-left"></i></button>
<button class="openbtn btn" id="navOpen" onclick="openNav()"><i class="fas fa-bars"></i></button>
<a href="#" class="pt-3">
<div class="row">
<div class="col-2">
<i class="fas fa-home"></i> <span>Home</span>
</div>
</div>
</a>
<a href="#">
<div class="row">
<div class="col-2">
<i class="fas fa-users"></i> <span>Contacts</span>
</div>
</div>
</a>
</div>
</body>
</html>
If you want to center align them, you can:
try text-align: center on the parent/wrapper of the item you are trying to center align
another method is to add display: flex to the parent/wrapper and margin: auto to the item you are trying to center align.
i assume that you want to center align a link... If so i think u are supposed to add "a" after the div class in css... I will take home for exmaple.
I think the css should look something like,
.col a{ text-align:cenetr; }
Hopefully it helps.. thx
I am using angular 2 with Bootstrap 4 and Angular Material. However, I am having trouble right align the elements inside my container div. I want both my button and text to be aligned to the right hand side
Here is what the code that I have tried to produce the result as shown in the photo
<div class="container">
<div class="pull-right">
<p class="d-inline pull-right">Some text</p>
<button type="button" class="btn btn-primary pull-right">+</button>
</div>
</div>
I have also tried this solution from StackOverflow
<div class="container">
<div class="asdf">
<p class="d-inline pull-right">Some text</p>
<button type="button" class="btn btn-primary pull-right">+</button>
</div>
</div>
.asdf {
margin-left:auto;
margin-right:0;
}
Both of these solutions does not move the elements to the right. What am I doing wrong?
I've removed the class pull-right class from both the button and the p tag and added text-right class to the div.container.
I think this is what you need.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container text-right">
<p class="d-inline">Some text</p>
<button type="button" class="btn btn-primary d-inline">+</button>
</div>
Bootstrap 5 (update 2021)
Because of new RTL support, *-left and *-right classes have changed to *-start and *-end. Here are the Bootstrap 4 to Bootstrap 5 conversions:
float-left => float-start
float-right => float-end
ml-auto => ms-auto
mr-auto => me-auto
Bootstrap 4 (original answer)
In Bootstrap 4, pull-right has been replaced with float-right.
If float-right is not working, remember that Bootstrap 4 is now flexbox, and many elements are display:flex which can prevent float-right from working. In some cases, the utility classes like align-self-end or ml-auto work to right align elements that are inside a flexbox container like a Bootstrap 4 .row, Card or Nav. The ml-auto (margin-left:auto) is used in a flexbox element to push elements to the right.
Also, remember that text-right still works on inline elements.
Bootstrap 4 align right examples
One simple way to handle to use the align option
<div class="col-sm-12" align="right">
<button type="submit" class="btn btn-primary"><i class="fa fa-check-circle" aria-hidden="true"></i> Approve</button>
You are not doing anything wrong. Just copy and paste your code in any online bootstrap editor, you will get the right result. But you can write it in a more structured way
HTML code:
<div class="container">
<div class="row">
<div class="col-md-12 .asdf">
<button type="button" class="btn btn-primary pull-right">+</button>
<p class="pull-right">Some text</p>
</div>
</div>
</div>
CSS code
.asdf {
margin-left:auto;
margin-right:0;
}
I am building a form in Twitter Bootstrap but I'm having issues with centering the button below the input in the form. I have already tried applying the center-block class to the button but that didn't work. How should I fix this?
Here is my code.
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
Next Step!
</button>
</div>
</div>
Wrap the Button in div with "text-center" class.
Just change this:
<!-- wrong -->
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>
To this:
<!-- correct -->
<div class="col-md-4 text-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button>
</div>
Edit
As of BootstrapV4, center-block was dropped #19102 in favor of m-*-auto
According to the Twitter Bootstrap documentation: http://getbootstrap.com/css/#helper-classes-center
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
Next Step!
</button>
</div>
</div>
All the class center-block does is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from so will not center itself as anticipated.
See an example of the code above here: https://jsfiddle.net/Seany84/2j9pxt1z/
<div class="row">
<div class="col-sm-12">
<div class="text-center">
<button class="btn btn-primary" id="singlebutton"> Next Step!</button>
</div>
</div>
</div>
add to your style:
display: table;
margin: 0 auto;
<div class="container-fluid">
<div class="col-sm-12 text-center">
<button class="btn btn-primary" title="Submit"></button>
<button class="btn btn-warning" title="Cancel"></button>
</div>
</div>
You can do it by giving margin or by positioning those elements absolutely.
For example
.button{
margin:0px auto; //it will center them
}
0px will be from top and bottom and auto will be from left and right.
I tried the following code and it worked for me.
<button class="btn btn-default center-block" type="submit">Button</button>
The button control is in a div and using center-block class of bootstrap helped me to align the button to the center of div
Check the link where you will find the center-block class
http://getbootstrap.com/css/#helper-classes-center
use text-align: center css property
Update for Bootstrap 4:
Wrap the button with a div set with the 'd-flex' and 'justify-content-center' utility classes to take advantage of flexbox.
<!-- Button -->
<div class="form-group">
<div class="d-flex justify-content-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">
Next Step!
</button>
</div>
</div>
The benefit of using flexbox is being able to add additional elements/buttons on the same axis, but with their own separate alignment. It also opens up the possibility of vertical alignment with the 'align-items-start/center/end' classes, too.
You could wrap the label and button with another div to keep them aligned with each other.
e.g. https://codepen.io/anon/pen/BJoeRY?editors=1000
You can do the following. It also avoids buttons overlapping.
<div class="center-block" style="max-width:400px">
Accept
Reject
</div>
It works for me
try to make an independent <div>then put the button into that.
just like this :
<div id="contactBtn">
<button type="submit" class="btn btn-primary ">Send</button>
</div>
Then Go to to your CSSStyle page and do the Text-align:center like this :
#contactBtn{text-align: center;}
For Bootstrap 3
we divide the space with the columns, we use 8 small columns (col-xs-8), we leave 4 empty columns (col-xs-offset-4) and we apply the property (center-block)
<!--Footer-->
<div class="modal-footer">
<div class="col-xs-8 col-xs-offset-4 center-block">
<button type="submit" class="btn btn-primary">Enviar</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
</div>
</div>
For Bootstrap 4
We use Spacing, Bootstrap includes a wide range of abbreviated and padded response margin utility classes to modify the appearance of an element.
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
more info here: https://getbootstrap.com/docs/4.1/utilities/spacing/
<!--Footer-->
<div class="modal-footer">
<button type="submit" class="btn btn-primary ml-auto">Enviar</button>
<button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>
I had this problem. I used
<div class = "col-xs-8 text-center">
On my div containing a few h3 lines, a couple h4 lines and a Bootstrap button.
Everything besides the button jumped to the center after I used text-center so I went into my CSS sheet overriding Bootstrap and gave the button a
margin: auto;
which seems to have solved the problem.
or you can give specific offsets to make button position where you want simply with bootstrap grid system,
<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>
this way, also let you specify button size if you set btn-block.
sure, this will only work md size range, if you want to set other sizes too, use xs,sm,lg.