Currently, I am tackling a Reactjs project and utilizing the Bootstrap framework for design purposes. Within a specific div element, there exists a button with two Span tags nested inside. The first Span tag contains an Icon while the second one holds text. However, in the output, the text appears under the Icon whereas I desire them to be displayed side by side. Any assistance with debugging this issue would be greatly appreciated.
Below is the code snippet for App.js:
import React from 'react';
import './App.css';
import Navbar from './Navbar/Navbar';
import FlightsButton from './FlightsButton/FlightsButton';
function App() {
return (
<div className="App">
<FlightsButton></FlightsButton>
</div>
);
}
export default App;
The contents of App.css are as follows:
There are no specific CSS styles defined in App.css
Here is the code snippet for FlightsButton.js:
import React, { Component } from 'react'
import './FlightsButton.css'
import ReusableButtons from '../ReusableButtons/ReusableButtons';
// Component definition and rendering code
The CSS styling for FlightsButton is provided in FlightsButton.css:
.buttonOne {
background-color: #008ca8;
/* Additional CSS styles for buttonOne */
}
/* Additional styling rules for FlightsButton component elements */
Similarly, the ReusableButtons.js file contains the following component code:
import React, { Component } from 'react';
import './ReusableButtons.css';
// ReusableButtons component definition and rendering code
The associated styling for ReusableButtons is defined in ReusableButtons.css:
.customButtonStyle {
background-color: #00b2d6;
/* Additional CSS styles for customButtonStyle */
}