Skip to content

Commit 7bf9898

Browse files
kyletsangkyletsang
authored
docs: fix bootstrap 4 links (react-bootstrap#5719)
1 parent 9541240 commit 7bf9898

File tree

3 files changed

+68
-65
lines changed

3 files changed

+68
-65
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
See the [documentation][documentation] with live editable examples and API documentation.
1515

16-
To find the documentation for the latest **Bootstrap 4** compatible release, [go here](https://react-bootstrap-v3.netlify.app) and for **Bootstrap 3** [go here](https://react-bootstrap-v3.netlify.app).
16+
To find the documentation for the latest **Bootstrap 4** compatible release, [go here](https://react-bootstrap.github.io) and for **Bootstrap 3** [go here](https://react-bootstrap-v3.netlify.app).
1717

1818
### Migrating from Bootstrap 3 to Bootstrap 4
1919

‎www/src/components/NavMain.js

Lines changed: 66 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import PropTypes from 'prop-types';
22

3+
import Container from 'react-bootstrap/Container';
34
import Navbar from 'react-bootstrap/Navbar';
45
import Nav from 'react-bootstrap/Nav';
56
import Tooltip from 'react-bootstrap/Tooltip';
@@ -109,71 +110,73 @@ function NavMain({ activePage }) {
109110
</a>
110111
</Banner>
111112
<StyledNavbar expand collapseOnSelect>
112-
<SkipToContentLink href="#rb-docs-content" tabIndex="0">
113-
Skip to content
114-
</SkipToContentLink>
115-
<Navbar.Brand href="/">
116-
<img src={logo} alt="react-bootstrap" height={30} />
117-
</Navbar.Brand>
118-
119-
<Nav role="navigation" id="top" className="d-none d-md-flex">
120-
{NAV_LINKS.map(({ link, title, exact }) => (
121-
<StyledNavLink
122-
key={link}
123-
href={link}
124-
active={exact ? activePage === link : activePage.startsWith(link)}
113+
<Container fluid>
114+
<SkipToContentLink href="#rb-docs-content" tabIndex="0">
115+
Skip to content
116+
</SkipToContentLink>
117+
<Navbar.Brand href="/">
118+
<img src={logo} alt="react-bootstrap" height={30} />
119+
</Navbar.Brand>
120+
121+
<Nav role="navigation" id="top" className="d-none d-md-flex">
122+
{NAV_LINKS.map(({ link, title, exact }) => (
123+
<StyledNavLink
124+
key={link}
125+
href={link}
126+
active={
127+
exact ? activePage === link : activePage.startsWith(link)
128+
}
129+
>
130+
{title}
131+
</StyledNavLink>
132+
))}
133+
</Nav>
134+
<Nav className="ms-auto pe-md-5">
135+
<StyledDropdown id="t-version">
136+
<Dropdown.Toggle id="dropdown-version" as={StyledNavLink}>
137+
v{config.version} (
138+
<span className="d-none d-lg-inline">Bootstrap </span>
139+
{config.bootstrapVersion.split('.').slice(0, 2).join('.')})
140+
</Dropdown.Toggle>
141+
<Dropdown.Menu role="menu">
142+
<Dropdown.Item href="https://react-bootstrap.github.io">
143+
v1.5.2 (Bootstrap 4)
144+
</Dropdown.Item>
145+
<Dropdown.Item href="https://react-bootstrap-v3.netlify.app">
146+
v0.33.1 (Bootstrap 3)
147+
</Dropdown.Item>
148+
</Dropdown.Menu>
149+
</StyledDropdown>
150+
<OverlayTrigger
151+
placement="bottom"
152+
delay={{ show: 200 }}
153+
overlay={<Tooltip id="t-github">Github</Tooltip>}
125154
>
126-
{title}
127-
</StyledNavLink>
128-
))}
129-
</Nav>
130-
<Nav className="ms-auto pe-md-5">
131-
<StyledDropdown id="t-version">
132-
<Dropdown.Toggle id="dropdown-version" as={StyledNavLink}>
133-
v{config.version} (
134-
<span className="d-none d-lg-inline">Bootstrap </span>
135-
{config.bootstrapVersion.split('.').slice(0, 2).join('.')})
136-
</Dropdown.Toggle>
137-
<Dropdown.Menu role="menu">
138-
<Dropdown.Item href="https://react-bootstrap.netlify.app">
139-
v1 (Bootstrap 4)
140-
</Dropdown.Item>
141-
</Dropdown.Menu>
142-
<Dropdown.Menu role="menu">
143-
<Dropdown.Item href="https://react-bootstrap-v3.netlify.app">
144-
v0.33.1 (Bootstrap 3)
145-
</Dropdown.Item>
146-
</Dropdown.Menu>
147-
</StyledDropdown>
148-
<OverlayTrigger
149-
placement="bottom"
150-
delay={{ show: 200 }}
151-
overlay={<Tooltip id="t-github">Github</Tooltip>}
152-
>
153-
<StyledNavLink
154-
href="https://github.com/react-bootstrap/react-bootstrap"
155-
target="_blank"
156-
rel="noopener noreferrer"
155+
<StyledNavLink
156+
href="https://github.com/react-bootstrap/react-bootstrap"
157+
target="_blank"
158+
rel="noopener noreferrer"
159+
>
160+
<FontAwesomeIcon icon={faGithub} size="lg" />
161+
<span className="visually-hidden">Github</span>
162+
</StyledNavLink>
163+
</OverlayTrigger>
164+
<OverlayTrigger
165+
placement="bottom"
166+
delay={{ show: 200 }}
167+
overlay={<Tooltip id="t-discord">Discord</Tooltip>}
157168
>
158-
<FontAwesomeIcon icon={faGithub} size="lg" />
159-
<span className="visually-hidden">Github</span>
160-
</StyledNavLink>
161-
</OverlayTrigger>
162-
<OverlayTrigger
163-
placement="bottom"
164-
delay={{ show: 200 }}
165-
overlay={<Tooltip id="t-discord">Discord</Tooltip>}
166-
>
167-
<StyledNavLink
168-
href="https://discord.gg/AKfs9vpvRW"
169-
target="_blank"
170-
rel="noopener noreferrer"
171-
>
172-
<FontAwesomeIcon icon={faDiscord} size="lg" />
173-
<span className="visually-hidden">Discord</span>
174-
</StyledNavLink>
175-
</OverlayTrigger>
176-
</Nav>
169+
<StyledNavLink
170+
href="https://discord.gg/AKfs9vpvRW"
171+
target="_blank"
172+
rel="noopener noreferrer"
173+
>
174+
<FontAwesomeIcon icon={faDiscord} size="lg" />
175+
<span className="visually-hidden">Discord</span>
176+
</StyledNavLink>
177+
</OverlayTrigger>
178+
</Nav>
179+
</Container>
177180
</StyledNavbar>
178181
</>
179182
);

‎www/src/pages/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export default withLayout(
9797
render() {
9898
return (
9999
<main id="rb-docs-content">
100-
<MastHead fluid>
100+
<MastHead>
101101
<Content>
102102
<Heading>React Bootstrap</Heading>
103103
<SubHeading>

0 commit comments

Comments
 (0)