I just started using react with bootstrap and implemented a navbar. I can see that bootstrap has many functionalities, however I also see that it is limited in functionality, or, it doesn't give as much 'freedom' in terms of customization. I hope I am wrong but here is my example:
<Grid>
<Row className="text-center">
<h1>Our Products</h1>
</Row>
</Grid>
This code renders the <h1> in the middle of the screen no matter your device size. It works perfectly!
<Navbar>
<Navbar.Brand className="text-center">
<a className='menuItem' href="#home">Sample Text</a>
</Navbar.Brand>
</Navbar>
This is supposed to render a navigation bar with the <Navbar.Brand> in the middle of the screen. The problem is that it has no effect!
I also tried to apply style instead of the className, or even define my own className and work with it in a .css file but it never works. Is this a limitation of React Bootstrap?
I have been able to do something like this to put the text in the middle
<Grid>
<Row className="show-grid">
<Col xs={4} md={5}></Col>
<Col xs={4} md={5}>{this.props.children}</Col>
<Col xs={4} md={5}></Col>
</Row>
</Grid>
I would still like to know how to use the className="text-center" to place the <Navbar.Brand> in the center or, any way to customize it.
I think you can change the default text alignment inside a file named "App.css" that comes with React package
I found out that this problem is pretty common and in most cases has no answer (here, tried every solution offered here but didn't work). I found out that the only way to make it work is to define a custom-className and edit it in CSS. Weird is that it doesn't work with inline styling for me!
The code becomes:
<div>
<Navbar>
<Navbar.Brand className="navbar-brand-custom">
<p>Metanice</p>
</Navbar.Brand>
</Navbar>
</div>
with an external css
.navbar-brand-custom {
width: 100%;
text-align: center;
}
I also found out that it will never work if you don't specify the width
Related
I need to align the text inside <Link>(react-router-dom) to right end of Label, like this,
I have tried bootstrap classes and custom CSS styles but none of'em worked for me,
<Form.Label style={{ fontWeight: 'bold' }}>
<div className="w-100">Password
<Link to="/forgot-password" className="w-100 text-right" style={{textAlign: "right"}}>Forgot Password?</Link>
</div>
</Form.Label>
Thanks in advance.
Try this:
<Form.Label style={{ fontWeight: 'bold' display: flex; justify-content: space-between}}>
<div className="w-100">Password</div>
<Link to="/forgot-password" className="w-100">Forgot Password?</Link>
</Form.Label>
try putting password in <span> and then put your span and link in a div
and then use flexbox justify-content to space-between
You should be able to achieve a similar outcome with CSS Float.
Add ‘float: left’ to the label and ‘float: right’ to the link, this should mean they are on the same line. You’ll probably need to adjust the widths of the two, as well as making sure the input doesn’t also float (believe you do ‘float: none’).
Further questions, just comment
(PS Apologies for bad text formatting of answer, on mobile)
I'm trying to use span to allow the events using grid-column to spread across multiple days in a calendar, but this seems to only work in css or styled-components. It does not work in inline-styles. Anyone have any idea to make this work with inline-styles?
codesandbox: https://codesandbox.io/s/react-event-calendar-8v9o1?file=/src/Components/CalendarEvent.js
Code Snippet:
<span
className="calendar-event-label"
styled={{gridColumnStart: col, gridColumnEnd: `span ${colSpan}`}}
onClick={onClick}
>{title}</span>
Use Style instead of Styled
style={{
gridColumnStart: col,
gridColumnEnd: `span ${colSpan}`
}}
I checked the changes in the code sandbox it works.
Working: https://codesandbox.io/s/react-event-calendar-forked-4s0h9
I have Card with 2 Card.Sections. I'm trying to align the second one to far right however nothing works for me. I tried:
Setting sections as flex and assigning marginLeft: auto for the second one
Setting Card position: relative, then adding float: right to the second one
I faced the same issue today, here's how I solved it:
<Card horizontal tokens={cardTokens}>
<Card.Section>
<Checkbox
label="todo status"
/>
</Card.Section>
<Card.Item grow={1}>
<span />
</Card.Item>
<Card.Section styles={footerCardSectionStyles}>
<Icon iconName="Delete" />
</Card.Section>
</Card>
As you can see I used
<Card.Item grow={1}>
<span />
</Card.Item>
between the two Card.Sections this is inserting an element with the remaining width thus pushing the second Card.Section to the end.
I am referring to the React Lazy Load Image Component.
I need to tweak the display attribute of the image I am rendering with this library. But can't seem to find any way.
I tried to wrap the component with a div and use style={{display: 'inline'}}, but it didn't work.
<div className="ui image" style={{ display: 'inline' }}>
<LazyLoadImage
src={src}
effect="blur"
/>
</div>
I am using this portion of code inside a <Card/> component. The default css of the library contains display: inline-block which is making my image have an extra border at the bottom. I don't want it.
P.S.
I am using Semantic UI for my entire project. I want to use whatever style Semantic is providing me. That's why I need to teak the display attribute of this library.
I'm trying to make a Headerelement sit next to an Button icon but I cannot make it happen.
Without attempting any Grids listing them like this
<Header as='h4'>Header text</Header>
<Button icon className='transparentButton'>
<Icon name='add'/>
</Button>
makes it look like this - each item on different line:
If I try to make a Grid with one row and two columns there is a massive space between the two and also the header text is wrapped. At least is vertically aligned I guess...
<Grid>
<Grid.Row verticalAlign='middle'>
<Grid.Column>
<Header as='h4'>Header text</Header>
</Grid.Column>
<Grid.Column>
<Button icon className='transparentButton'>
<Icon name='add'/>
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
This looks like that:
I'd really love to hear how suggestions on how to make the two items sit next to each other properly. I want to make it look like this:
Example code https://codesandbox.io/s/semantic-ui-react-example-ttnxc (not sure why the Icon is not rendering there though).
Actually I think that Header Component is displaying as block
Just try to edit it's css and make:
display: inline-block;
and it should render successfully
unfortunately your example code didn't load so i couldn't try this but it should work