This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Centering a single column using bootstrap 4 grid system [duplicate]
(2 answers)
Center the content inside a column in Bootstrap
(7 answers)
Closed 1 year ago.
I couldn't find a straightforward way to centre a div in Bootstrap 5. Maybe I am missing something obvious. Google took me to the flex doc.
In Bootstrap 4, I could do it by setting col-sm-* and using col-sm-offset-*
Note: I don't want to centre the content in the div. Just need to put whole div in the centre (horizontally). Is setting a margin the only way?
You can use with d-flex align-items-center justify-content-center like below demo:
body{
height: 100vh;
}
.container{
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container d-flex align-items-center justify-content-center">
<div>
<h1>You Div</h1>
</div>
</div>
Related
CodePen https://codepen.io/david263/pen/zYNaoRQ shows an example simple home page layout that fits the browser viewport perfectly and centers some div content (choose Change View > Full Page View in CodePen to see the page clearly). But note the CSS style elements used to set div heights and the many Bootstrap 5 classes used to achieve vertical centering. It took several days to get this working, but it fails to use only simple Bootstrap 5 classes.
<header id=jumbo class="px-5 d-flex justify-content-center align-items-center bg-dark" style="height:70vh">
<div class="row col-12 text-center text-light">
<h1 class="font-weight-bold display-4">Vertically Centered Jumbo Content</h1>
<h3 class="font-weight-bold">A great starter layout for a landing page</h3>
</div>
</header>
My attempt to use the usual container, row, and col classes (see https://codepen.io/david263/full/xxgzLPj) failed to achieve the full height demonstrated by the first example.
<header id=jumbo class="container-fluid bg-dark">
<div class="h-50 row align-items-center col-12 text-center text-light">
<div class="col py-auto">
<h1 class="font-weight-bold display-4">Vertically Centered Jumbo Content</h1>
<h3 class="font-weight-bold">A great starter layout for a landing page</h3>
</div>
</div>
</header>
And these difficulties were encountered before adding a background image, which doesn't seem possible in Bootstrap 5 at all.
Don't get me wrong; I'm not opposed to using CSS when necessary. It's just that it's hard to tell exactly what the limits are for Bootstrap 5 so that custom CSS becomes necessary.
Many websites have a home page containing a large photo or video in the background, with text centered horizontally and vertically in the foreground, so this example represents something that is very often used. Surely such a frequent layout must be possible in Bootstrap 5.
Bootstrap isn't a silver bullet - its a framework (think of it as a chassis that you need build on top of). Bootstrap offers a few "helper" classes so that one does not need to add a whole bunch of repetitive CSS .. but that's all it can do. A clear understanding of CSS helps a lot too in using Bootstrap.
For example, the h-50 class is only height: 50%; in CSS. That's 50% of it's parent .. but your <header id="jumbo" does not have a height .. so 50% of what .. 0 .. is unknown?? (This may vary from browser to browser)
It's not clear what you're trying to achieve - but if you head on over to https://getbootstrap.com/docs/5.0/examples/ you'll see a whole bunch of examples and starting points for you to get to where you need to be. I think the Cover example is a good spot to land on. (Once there, right click and "view page source" ...)
For a long time, a web site that I maintain had been using jQuery-UI v1.11.2. I decided to upgrade to the latest version which is currently v1.12.1. After the upgrade, I noticed that my jquery-ui buttonsets (which are basically radio buttons) now have the little dot showing. Previously that dot wasn't there.
I went over to the official jQuery-UI help docs for buttonsets. It turns out that their example now has those dots. I guess that's the new look.
Well, I want the old look back. No dots.
How do I made those dots disappear?
This widget is deprecated, use Controlgroup instead.
Suggest making use of classes.
Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes option.
This gives you the ability to more directly modify the CSS of an element inside a widget. The "dot" is made by changing the background color of the span and then giving it a border to make the "dot" smaller.
$(function() {
$("#radio").controlgroup({
classes: {
"ui-controlgroup": "nodot"
}
});
});
div.nodot label.ui-checkboxradio-checked .ui-icon-background {
border: 0 solid #aaaaaa;
background-color: #aaaaaa;
width: 16px;
height: 16px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form>
<fieldset>
<legend>Favorite jQuery Project</legend>
<div id="radio">
<input type="radio" id="sizzle" name="project">
<label for="sizzle">Sizzle</label>
<input type="radio" id="qunit" name="project" checked="checked">
<label for="qunit">QUnit</label>
<input type="radio" id="color" name="project">
<label for="color">Color</label>
</div>
</fieldset>
</form>
There is still a hover effect being applied, that is adding a box-shadow that I couldn't find.
I am using Angular with Material
<button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>
I am trying to add an icon to button, but I can't figure out how to do it, and can't find documentation for this.
https://material.angular.io/components/button/api
looking the docs, there is this:
that button has the following html:
<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="/"><span class="mat-button-wrapper">
<img _ngcontent-c1="" alt="angular" class="docs-angular-logo" src="../../../assets/img/homepage/angular-white-transparent.svg">
<span _ngcontent-c1="">Material</span>
</span> <div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay">
</div>
</a>
is that the right way to do it?
Just add the <mat-icon> inside mat-button or mat-raised-button. See the example below. Note that I am using material icon instead of your svg for demo purpose:
<button mat-button>
<mat-icon>mic</mat-icon>
Start Recording
</button>
OR
<button mat-raised-button color="accent">
<mat-icon>mic</mat-icon>
Start Recording
</button>
Here is a link to stackblitz demo.
All you need to do is add the mat-icon-button directive to the button element in your template. Within the button element specify your desired icon with a mat-icon component.
You'll need to import MatButtonModule and MatIconModule in your app module file.
From the Angular Material buttons example page, hit the view code button and you'll see several examples which use the material icons font, eg.
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
In your case, use
<mat-icon>thumb_up</mat-icon>
As per the getting started guide at https://material.angular.io/guide/getting-started, you'll need to load the material icon font in your index.html.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Or import it in your global styles.scss.
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
As it mentions, any icon font can be used with the mat-icon component.
My preference is to utilize the inline attribute. This will cause the icon to correctly scale with the size of the button.
<button mat-button>
<mat-icon inline=true>local_movies</mat-icon>
Movies
</button>
<!-- Link button -->
<a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a>
I add this to my styles.css to:
solve the vertical alignment problem of the icon inside the button
material icon fonts are always a little too small compared to button text
button.mat-button .mat-icon,
a.mat-button .mat-icon,
a.mat-raised-button .mat-icon,
a.mat-flat-button .mat-icon,
a.mat-stroked-button .mat-icon {
vertical-align: top;
font-size: 1.25em;
}
Add to app.module.ts
import {MatIconModule} from '#angular/material/icon';
& link in your global index.html.
the above CSS can be written in SASS as follows (and it actually includes all button types, instead of just button.mat-button)
button,
a {
&.mat-button,
&.mat-raised-button,
&.mat-flat-button,
&.mat-stroked-button {
.mat-icon {
vertical-align: top;
font-size: 1.25em;
}
}
}
The Material icons use the Material icon font, and the font needs to be included with the page.
Here's the CDN from Google Web Fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
I am trying to get an anchor in jquery to line up horizontally right next to a checkbox in a list structure. I previously had the checkbox inside of the anchor object, and this produced the result I wanted but now I want the checkbox to have a separate functionality then the anchor element, thus I wish to separate them. The CSS I am using is as follows, and as you can see from Jsfidle, it looks horrible with the checkbox floating to the top right spot of the button. Answers on here have noted that using field contain or display:inline would fix the problem but I have been unable to get it to work.
<div data-role="main" class="ui-content">
<h3>Some header</h3>
<ul data-role="listview" id = "tasklistTasks">
<li>
<div data-role="fieldcontain" style=" display:inline" >
<input type="checkbox">
Go here
</div>
</li>
<li>
<div data-role="fieldcontain" style=" display:inline" >
<input type="checkbox">
Go here
</div>
</li>
</ul>
</div>
I am using Jquery 2.1 and Jquery mobile 1.4.2. Thanks for any help
The reason for this behavior is that the checkbox is getting the CSS from the jquery mobile CSS you have applied. Inside that particular CSS, your checkbox class' CSS is getting overridden and it has :
margin: -11px 0 0 0;
due to which it is coming to the top left corner of your parent div.
If you are not using CDN of that CSS and you have that downloaded version, you can modify this with :
.ui-checkbox input, .ui-radio input {
position: absolute;
left: .466em;
width: 22px;
height: 22px;
margin: 12px 0 0 0;
outline: 0!important;
z-index: 1;
display: inline-block;
}
You can also see yourself by debugging it in your browser.
Here is how it looks now and i guess this is what you wanted:
http://jsfiddle.net/appleBud/bWFYv/2/
Hope this helps.
I'm working with jQuery Mobile for the first time and I'm having trouble accomplishing what seems like a simple change to the icons on a collapsible set (accordion).
I want to change the icon for each of the headings on a collapsible set to an up arrow for the expanded state and a down arrow for the collapsed state.
I've created a Fiddle that seems to have the same problem with code that I pretty much copied directly from the jQuery mobile site and modified a little.
Any help or pointers on this would be much appreciated. Thanks!
The docs page you refered actually uses the latest Work in Progress version of jquery mobile.So this is a feature we can expect in future versions of JQM.In the current stable version,we will not be able to change the icon by means of specifying a data attribute.
Here is an eg: which uses the Work in Progress version of jqm - http://jsfiddle.net/AAYjF/
But it is advisable to use the stable version.So you can use the following code to acheive this:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style>
.ui-collapsible .ui-icon{
background-position: -180px 50%;/*Position of up icon in icon sprite*/
}
.ui-collapsible-collapsed .ui-icon{
background-position: -216px 50%;/*Position of down icon in icon sprite*/
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
<div data-role="collapsible" >
<h3>Section 2</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
The logic is to use the background position of the down and up icons in the icon sprite for the collapsed and expanded icons
Demo : http://jsfiddle.net/6x8ew/
I'm sure you can improve upon this solution but here is a basic idea on one way to accomplish this without hacking into the JQM source.
$(document).on('pageinit',function(){
$('.ui-collapsible .ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-arrow-u');
$('[data-role=collapsible]')
.on('expand',function(){
$(this).find('.ui-icon').removeClass('ui-icon-arrow-u').addClass('ui-icon-arrow-d');
})
.on('collapse',function(){
$(this).find('.ui-icon').removeClass('ui-icon-arrow-d').addClass('ui-icon-arrow-u');
});
});
I am using jqm's collapsible events to switch to the appropriate icon.
See my working example.
I haven't done much with jQuery Mobile yet, so take it for what it's worth.
I think you need to put the attributes on the <div data-role="collapsible-set">, not on each data-role="collapsible". Obviously this would only work for all the children, and it wouldn't let you target individual children.
With jquery mobile version 1.4.0, you can accomplish this by having the following code in your CSS file
For custom right arrow
.ui-icon-arrow-r:after {
background: url("Path to your image file") no-repeat scroll 0px 0px transparent;
}
For custom down arrow
.ui-icon-arrow-d:after {
background: url("Path to your image file") no-repeat scroll 0px 0px transparent;
}