I'm new to Bootstrap and React JS and I'm trying to place my app at the center both vertically and horizontally. Currently this app is placed only horizontally and it seems to be attached to the top.
function App() {
return (
<GlobalContextProvider>
<div className="container">
<div className="row justify-content-center align-items-center"> // <--- Doens't work
<div className="col">
<Header />
<Main />
<Footer />
</div>
</div>
</div>
</GlobalContextProvider>
);
}
I have tried different approaches like my-auto, alight-self-center and others but for some reason nothing seems to work. Could you please help with this one (without using custom css)?
align-items-center aligns cols, so you need tu use one col for every chunk of content you want to align, but you shouln't be using cols for header, main and footer tags
Related
I want to make the {curdatetime} to stick to the left and the {title} to stay in the middle. so I'm trying to use flex justify content space between with bulma css but the all elements still sticks to the left..
this is my code
<>
<header className="has-text-centered">
<h1>LoliGhaya</h1>
</header>
<div className='is-flex-justify-content-space-between mb-2'>
<small>{curdatetime}</small>
<strong className='is-size-4'>{title}</strong>
</div>
</>
After looking at the documentation, you're using it a bit wrong.
This should work for you.
<>
<header className="has-text-centered">
<h1>LoliGhaya</h1>
</header>
<div className='is-flex is-justify-content-space-between mb-2'>
<small>{curdatetime}</small>
<strong className='is-size-4'>{title}</strong>
</div>
</>
I'm trying to align the text just above the hr tag like the logout button using bootstrap.
Here's what I want to achieve:
bootstrap code :
<div className="position-relative">
<hr/>
<div className="position-absolute end-0 bottom-0 d-flex">
<p className="align-baseline //not working">Logged in as {user?.email}</p>
<button onClick={handleLogout} className="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
Glad for any help
#Edit :
after adding mb-0 to my p tag :
Given the image, your <p> has some margin-bottom, add the bootstrap class mb-0 to the <p> tag.
Then to align the <p> to the bottom, you'd need to have the flex content pushed to bottom, that will be done with adding align-items-end to the div.
I also added a small padding to stop it from sticking to the bottom.
JSFiddle
Edit: As per the answer from G-Cyrillus, you actually don't need the positions either (I overlooked it before). A little change in structure and whole thing looks the same with lesser code. Updated JSFiddle
Here both <p> and <button> are part of d-flex. You can align both the items by using align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).
<div class="d-flex align-items-center">...</div>
You can find more resource here link.
You probably do not need absolute position , flex & order can do .
example
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="d-flex flex-column"><!-- make it a flex column to use order -->
<hr class="order-2 m-0" /><!-- resets margin & order -->
<div class="d-flex justify-content-end"><!-- here use the justify-content-xx class you need -->
<p class="m-0 mt-auto">Logged in as <b>SO User</b></p><!-- reset margins-->
<button onClick={handleLogout} class="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
</div>
</div>
In angular is it possible to have text wrap around an image if they are in two separate components? Or does the image and text have to live inside the same component? I need this to work if the image is on the left or right
<div class="row">
<app-img></app-img>
<app-copy></app-copy>
</div>
code simulator: StackBlitz
Adding style to the component tag solves the problem for me.
<div class="row">
<app-my-img style="float:right"></app-my-img>
<app-my-copy></app-my-copy>
</div>
<hr>
<div class="row">
<app-my-img style="float:left"></app-my-img>
<app-my-copy></app-my-copy>
</div>
I have a code block like:
<div class="col-md-12">
<div class="row">
<ng-template dynamicComponents></ng-template>
</div>
</div>
dynamicComponents is a directive using which I inject dynamic components.
All the application is using Bootstrap and is working fine but the dynamically injected components are shrinking or not working with bootstrap css, I even tried using encapsulation: ViewEncapsulation.None but it doesn't seem to work.
Please refer the screenshots below:
Here everything works fine till class=row and it is taing the full width, but once a dynamic component named app-from-builder-components-editor is injected it breaks up the bootstrap properties, please see below:
What can I do to get the bootstrap properties to work ?
The problem is your component host (app-form-builder-components-editor) that sits between your row and col divs. To make it work, your 'col-md-12' div should be a direct child of your 'row' div.
What you could do is putting the <div class="row"> inside your app-form-builder component's template to work around this issue.
I solved this by using containers:
<ng-template>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!-- content -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!-- content -->
</div>
</div>
</div>
</ng-template>
Not ideal, but it seems to stop the layout issue. Angular templates seem to rewrite the DOM and nest the rows, for some reason. This "resolves" the issue.
I have a table inside a div that looks like this:
<div fxLayout="row" class="container" fxLayoutAlign="start center">
No related CSS -- I have tried various things but in internet explorer, where I have to use polyfills for anything to work anyway, it will simply refuse to center.
I've found a similar stackoverflow thread but the alignment of the items inside the div was different and didn't really apply to my use case.
I ended up wrapping my whole app in app.component.html like this:
<div class="container"
fxLayout="column">
<div>
<app-navigation></app-navigation>
</div>
<div fxFlexAlign="center" id="routerOutletDiv">
<router-outlet></router-outlet>
</div>
</div>
Then, in my component that I'm trying to center things, my main div where I wrap ALL other divs has the following:
<div fxFlexAlign="center" class="container" fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="15px">
Whilst most of the divs inside this 'parent' have the following:
<div fxFill class="item">
And some of them that had more items inside them, have the following:
<div fxFill fxLayoutAlign="center" class="item">
Also ended up adding fxLayoutAlign="center" to text that had icons inside it, it didn't want to center otherwise. But I did not have to add extra css or touch other properties.