On the React-Bootstrap page, I've incorporated a footer container with 3 containers to store information. However, when reducing the size of the page, the data becomes invisible due to a length issue with the div.
What I aim for is to make sure that as the page size decreases, the footer data doesn't just vanish abruptly but adjusts based on the div size. Similar to how Google Earth's footer data works.
For example: If my footer data is "Welcome to the React-Bootstrap world" When the page size shrinks, it should appear as "Welcome to the..."
Below is the code:
<Container fluid className='container-footer'>
<Row>
<Col md={6}>Loading</Col>
<Col md={6>
<div className="footer-controller">
<a href="https://leafletjs.com" title="A JavaScript library for interactive maps" style={{color:'#fff'}}>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="8">
<path fill="#4C7BE1" d="M0 0h12v4H0z"></path>
<path fill="#FFD500" d="M0 4h12v3H0z"></path>
<path fill="#E0BC00" d="M0 7h12v1H0z"></path>
</svg> Leaflet</a>
<span aria-hidden="true"gt;|</span> Welcome to the React-Bootstrap world
</div>
</Col>
</Row>
</Container>
CSS:
.container-footer {
position: absolute;
height: 19px;
font-size: 13px;
font-weight: 100;
z-index: 1000;
background: rgba(0, 0, 0, 0.6);
bottom: 0;
color: #fff !important;
}
.footer-controller {
float: right;
}