In the CodeSandbox example below, I have two Bootstrap (reactstrap) Card elements side-by-side. Is there any way to get the Button in each card to align to the bottom of the card, plus some margin, so they look aligned to each other? I tried various Flexbox classes from the Bootstrap docs: https://getbootstrap.com/docs/4.0/utilities/flex/ but nothing has worked.
Note, the CodeSandbox output window has to be wide enough for the cards to stack side-by-side as in the image below.
CodeSandbox
below code content:
import React from "react";
import ReactDOM from "react-dom";
import {
Card,
CardText,
CardBody,
CardTitle,
CardSubtitle,
CardDeck,
Button
} from "reactstrap";
function App() {
return (
<div className="App">
<CardDeck>
<Card>
<CardBody>
<CardTitle tag="h5">Card title</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Card subtitle
</CardSubtitle>
<CardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</CardText>
<Button>Button</Button>
</CardBody>
</Card>
<Card>
<CardBody>
<CardTitle tag="h5">Card title</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Card subtitle
</CardSubtitle>
<CardText>
Some quick example text to build on the card title and make up the
bulk of the card's content. Some quick example text to build on
the card title and make up the bulk of the card's content.
</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</CardDeck>
</div>
);
}
you can use display flex. but you need to break your CardBody into two divs, one with the content, and another with the button. use then justifyContent: 'space-between'. Add also some margin-top to wrapping button div to ensure some space for safety.
below the approach I described:
<Card>
<CardBody style={{display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
<div>
<CardTitle tag="h5">Card title</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Card subtitle
</CardSubtitle>
<CardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</CardText>
</div>
<div style={{marginTop: '12px'}}>
<Button >Button</Button>
</div>
</CardBody>
</Card>
Related
I have a React-Bootstrap Card component that I'm making. I'd like the content in the <Card.Body> to flow from left to right, similar to an HStack in SwiftUI. Currently, the content renders vertically. Is there any way to change this? Below is my code.
function TestCard(props) {
return (
<Card>
<Card.Img />
<Card.Body>
<Card.Title className="fw-bold">Card Title</Card.Title>
<div className="vr" />
<Card.Text>Card Text</Card.Text>
</Card.Body>
</Card>
);
}
My problem is, I have a js file having a functionality of opening a tab-bar on clicking. Here is the link of that js file https://jsfiddle.net/6719phr3/1/
I want the same feature of opening a tab-bar to be used in the other js file as well without adding the methods and functionalities again in that js file. The Code is here.
import React, { useState,useCallback } from "react";
import {Card,CardGroup,Badge} from 'react-bootstrap';
const Health_status = (props) => {
return (
<CardGroup>
<Card className="cards">
<Card.Body>
<Card.Title>Cluster-1 [ID]</Card.Title>
<Card.Text>
</Card.Text>
</Card.Body>
<Card border="secondary" style={{ width: '18rem' }} className ="sub-cards-rec">
<Card.Header>Recording Unit [ID]</Card.Header>
<Card.Body>
<Card.Title>[ID]</Card.Title>
<Card.Text>
<h6 onClick{()=>openPane()}><Badge pill bg="primary" >Cumulative Data Rate:{}</Badge></h6>
{css ? (<h6 onClick={toggle2}><Badge pill bg="success" >Cumulative Sensor Status:{}</Badge></h6>)
:(<h6 onClick={toggle2}><Badge pill bg="danger" >Cumulative Sensor Status:{}</Badge></h6>)
}
</Card.Text>
</Card.Body>
</Card><br />
<Card border="secondary" style={{ width: '18rem' }} className ="sub-cards-ana">
<Card.Header>Analysis Unit [ID]</Card.Header>
<Card.Body>
<Card.Title>[ID]</Card.Title>
<Card.Text>
<h6><Badge pill bg="warning" >Instance-Number:{}</Badge></h6>
</Card.Text>
</Card.Body>
</Card><br />
</Card>
</CardGroup>
}
export default Health_status;
So I want to add a tabbar on clicking <Card.Text> Cumulative Data Rate from the above given code. How to export and import the methods and libraries from the first js file to this js file.
Code
<Box backgroundColor="#fdfdfd" p={6}>
<Flex
justifyContent="center"
alignItems="center"
w="100%"
mt={5}
>
<Heading textAlign="left" fontSize="1.5rem" mb={5} display="block">
Những cán bộ của chúng tôi
</Heading>
{Data.map(userData => <UserInfo key={userData.id} data={userData} />)}
</Flex>
</Box>
Web preview
image
Problem
The Heading is inline, but I don't want to be inline. Is there any way to disable it?
Edit
If I mode Heading above Flex then it will look like this
image
That is due to the fact that the wrapper of the Heading component is a Flex box container. to make Heading sit on it own Row You should wrap it inside a Box element and set attribute w="100%" like this
<Flex wrap="wrap">
<Box w="100%">
<Heading textAlign="left" fontSize="1.5rem" mb={5} display="block">
Những cán bộ của chúng tôi
</Heading>
</Box>
// here will go the {Data.map...}
<Box>
</Flex>
As Box will be a flex item sitting at the same level as UserInfo which are return from the map function. It will take the entire horizontal space available and all other elements will go underneath It.
You should add wrap attribute to the Flex Component so as the box take 100% width available all other will go on a new line
I need to create a responsive React application using JavaScript that will show a list of cards on the page as pictured below. I'm fairly new to React and am not really sure where to begin with the layout. Currently, I have created a few reusable components for each portion of the app that I believe need to be added. These are the main container that will house every other component, the toolbar, sidebar, main card container that will house the cards in the center, and the footer. I'm not even sure if I need the main container component, maybe I can just use divs to house all the other components? Any tips? I can clarify and provide more details if needed. Thank you.
you can use css flex with inline-block,
index.js
import React from "react";
import "./style.css";
export default function App() {
return (
<div>
<div className="rowA col-md-4">
<div>A</div>
<div>B</div>
</div>
<div className="rowA clom-md-4">
<div>C</div>
<div>D</div>
</div>
<div className="rowA">
<div>E</div>
<div>F</div>
</div>
</div>
);
}
styles.css
.rowA {
display: flex;
flex-direction: row;
width: 100%;
}
.rowA div {
display: inline-block;
text-align: center;
}
my code for same design layout,
i used reactstrap for desgning,
Application code found here
import React from "react";
import "./style.css";
import "bootstrap/dist/css/bootstrap.css";
import {
Card,
CardImg,
CardText,
CardBody,
CardTitle,
CardSubtitle,
Button,
CardGroup,
CardBody,
CardImg,
Container,
Row,
Col,
CardFooter,
CardDeck
} from "reactstrap";
export default function App() {
return (
<div>
<Container>
<Row className="show-border">
<Col xs="8">
<Row>
<Col xs="6">
<Button variant="light">Add Card</Button>
</Col>
<Col xs="6">
<Button variant="light">Sort Card</Button>
</Col>
</Row>
<CardDeck className="show-border">
<Card>
<CardTitle>Title</CardTitle>
<CardText>This content is a little bit longer.</CardText>
<CardBody />
<CardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
</CardFooter>
</Card>
<Card>
<CardTitle>Title</CardTitle>
<CardText>This content is a little bit longer.</CardText>
<CardBody />
<CardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
</CardFooter>
</Card>
</CardDeck>
</Col>
<Col className="show-border" xs="4">
(Instructions...)
</Col>
</Row>
<Row className="show-border">
<Col xs="6">Footer</Col>
</Row>
</Container>
</div>
);
}
I want the card header to be the normal text together with an image, side by side.
import logo from './images/logo.svg';
render() {
return (
<div>
<Card>
<Card.Content className='left aligned'>
<div className="two column headers">
<Card.Header>Hello World!</Card.Header>
<Image src={logo} size='tiny'/>
</div>
<Card.Meta>Item</Card.Meta>
<Card.Meta>Category</Card.Meta>
</Card.Content>
<Card.Content>
<Card.Description>10 units of test.</Card.Description>
</Card.Content>
</Card>
</div>
);
The image is appearing just after the 'Hello World!' header. How can I put them side by side, left aliging the text and right aligning the image ?
You can do this with CSS, however I will recomend to use Grid there.
<Card.Header>
<Grid>
<Grid.Column width={12}>Hello World!</Grid.Column>
<Grid.Column width={4}>
<Image src={logo} size='tiny'/>
</Grid.Column>
</Grid>
</Card.Header>
By the way, if you want to have an Image component on left, you can use Header component, see examples.