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>
</>
Related
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>
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
I'm using Bulma. Consider the following HTML
<div class="container">
<div class="columns">
<div class="column has-text-centered">
<h1 class="title">
Welcome! :)
</h1>
<div class="buttons">
Login now!
Register now!
</div>
</div>
</div>
</div>
Now, the title is centered but the buttons aren't. Of course, if we set display: block; to the div which groups together the buttons, they get centered as well. But I couldn't find any example and I'm not sure if that's the way to go here.
Is there a more "Bulma-like" way of solving this problem?
I'm not sure about that.
I tried to reproduce the issue but it seems that the buttons are centered.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet"/>
<div class="container">
<div class="columns">
<div class="column has-text-centered">
<h1 class="title">
Welcome! :)
</h1>
<div class="buttons">
Login now!
Register now!
</div>
</div>
</div>
</div>
Maybe there are other rules that overrides this behavior?
EDIT:
It seems that in the same version between 0.4.0 and 0.8.0 they take advantage of the flex box layout.
In the example that you shared the buttons class has the display: flex-box but it miss the property justify-content: center; for centering the content of that div.
I don't know if it is the expected behavior or a bug.
Here a working example: https://jsfiddle.net/gix_lg/73vmofqa/1/
Have you tried " is-vcentered" instead of "has-text-centered" ?
Also, you can use empty columns by using a div with a class="column" to create horizontal space around .column elements, or use .is-centered on the parent .columns element
Have you tried to inspect your page to see the css?
I currently have the following HTML in a React Component and i need to set the z-index on the <header>'s in order for their tooltips to overlap the content below correctly. The Header in each section needs to have its z-index higher than the header in the next section.
I am currently achieving this via inline styles but appreciate this is not very scalable. I was wondering if there was a way i could do this via SCSS/CSS rather than inline styles?
<section>
<header style={{zIndex: 3}}></header>
</section>
<section>
<header style={{zIndex: 2}}></header>
</section>
<section>
<header style={{zIndex: 1}}></header>
</section>
<section>
<header style={{zIndex: 0}}></header>
</section>
Thanks
I am working on a site using Zurb Foundation. The content will be rendered differently based on the size of the screen. If the content is being viewed on a phone, the navigation structure will use a off-canvas nav item for example. To demonstrate, here is a fiddle: http://jsfiddle.net/LFUvM/5/.
In my example, you can see that there is
Content Goes Here
My problem is, I don't want to write the actual content three times in my HTML. Some of my content is quite large. Is there a way to a) share the content across all three views b) still use the off-canvas nav option?
THank you!
I made an example using <section role="main"></section> after <a class="exit-off-canvas" href="#"></a>
You can take a look at it here
If it's possible to restructure the HTML a bit you can achieve this with the following setup:
<div class="off-canvas-wrap show-for-small-only">
<div class="inner-wrap">
<nav class="tab-bar show-for-small-only">
<section class="tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon"><span></span></a>
</section>
</nav>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
</ul>
</aside>
<a class="exit-off-canvas"></a>
</div>
</div>
<div>
<h1 class="show-for-small-only">Phone</h1>
<h1 class="show-for-medium-only">Medium</h1>
<h1 class="show-for-large-only">Large</h1>
Content Goes here
</div>
And here's the working jsFiddle.