Not able to align menu items horizontally in navigation bar

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I am developing a react app using create-react-app. In the beginning, I am not able to align the menu items in my navbar horizontaly. Refer Screenshot below.

enter image description here

Also, I can not figure out why my navbar doesn't picking up the css, as you can see I have specifically mentioned the inverse theme of the navbar. Here is my NavigationBar.js file

import React from "react";

import {Navbar, Nav, NavItem} from "react-bootstrap";



class Header extends React.Component{

    render() {

        return (

            <Navbar inverse>

                <Navbar.Header>

                    <Navbar.Brand>

                        <a href="#brand">Tweelyze</a>

                    </Navbar.Brand>

                </Navbar.Header>

                <Nav>

                    <NavItem eventKey={1} href="#">Link1</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                </Nav>

            </Navbar>

        );

    }

}



export default Header;

I want my navbar to be something like this

enter image description here

Here is my App.js

import React, { Component } from 'react';

import Header from "./NavigationBar"

class App extends Component {

  render() {

    return (

        <div><Header/></div>



    );

  }

}



export default App;

And Index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './components/App';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

What exactly is that I am missing?

asked Jan 4 at 0:37

Siddharth Sinha

165119

Please refer to this: react-bootstrap.github.io/getting-started/introduction

– joelgullander
Jan 4 at 0:45

You need to import a stylesheet as react-bootstrap doesn't come with styling per default

– joelgullander
Jan 4 at 0:46

add a comment |

I am developing a react app using create-react-app. In the beginning, I am not able to align the menu items in my navbar horizontaly. Refer Screenshot below.

enter image description here

Also, I can not figure out why my navbar doesn't picking up the css, as you can see I have specifically mentioned the inverse theme of the navbar. Here is my NavigationBar.js file

import React from "react";

import {Navbar, Nav, NavItem} from "react-bootstrap";



class Header extends React.Component{

    render() {

        return (

            <Navbar inverse>

                <Navbar.Header>

                    <Navbar.Brand>

                        <a href="#brand">Tweelyze</a>

                    </Navbar.Brand>

                </Navbar.Header>

                <Nav>

                    <NavItem eventKey={1} href="#">Link1</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                </Nav>

            </Navbar>

        );

    }

}



export default Header;

I want my navbar to be something like this

enter image description here

Here is my App.js

import React, { Component } from 'react';

import Header from "./NavigationBar"

class App extends Component {

  render() {

    return (

        <div><Header/></div>



    );

  }

}



export default App;

And Index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './components/App';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

What exactly is that I am missing?

asked Jan 4 at 0:37

Siddharth Sinha

165119

Please refer to this: react-bootstrap.github.io/getting-started/introduction

– joelgullander
Jan 4 at 0:45

You need to import a stylesheet as react-bootstrap doesn't come with styling per default

– joelgullander
Jan 4 at 0:46

add a comment |

I am developing a react app using create-react-app. In the beginning, I am not able to align the menu items in my navbar horizontaly. Refer Screenshot below.

enter image description here

Also, I can not figure out why my navbar doesn't picking up the css, as you can see I have specifically mentioned the inverse theme of the navbar. Here is my NavigationBar.js file

import React from "react";

import {Navbar, Nav, NavItem} from "react-bootstrap";



class Header extends React.Component{

    render() {

        return (

            <Navbar inverse>

                <Navbar.Header>

                    <Navbar.Brand>

                        <a href="#brand">Tweelyze</a>

                    </Navbar.Brand>

                </Navbar.Header>

                <Nav>

                    <NavItem eventKey={1} href="#">Link1</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                </Nav>

            </Navbar>

        );

    }

}



export default Header;

I want my navbar to be something like this

enter image description here

Here is my App.js

import React, { Component } from 'react';

import Header from "./NavigationBar"

class App extends Component {

  render() {

    return (

        <div><Header/></div>



    );

  }

}



export default App;

And Index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './components/App';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

What exactly is that I am missing?

asked Jan 4 at 0:37

Siddharth Sinha

165119

I am developing a react app using create-react-app. In the beginning, I am not able to align the menu items in my navbar horizontaly. Refer Screenshot below.

enter image description here

Also, I can not figure out why my navbar doesn't picking up the css, as you can see I have specifically mentioned the inverse theme of the navbar. Here is my NavigationBar.js file

import React from "react";

import {Navbar, Nav, NavItem} from "react-bootstrap";



class Header extends React.Component{

    render() {

        return (

            <Navbar inverse>

                <Navbar.Header>

                    <Navbar.Brand>

                        <a href="#brand">Tweelyze</a>

                    </Navbar.Brand>

                </Navbar.Header>

                <Nav>

                    <NavItem eventKey={1} href="#">Link1</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                </Nav>

            </Navbar>

        );

    }

}



export default Header;

I want my navbar to be something like this

enter image description here

Here is my App.js

import React, { Component } from 'react';

import Header from "./NavigationBar"

class App extends Component {

  render() {

    return (

        <div><Header/></div>



    );

  }

}



export default App;

And Index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './components/App';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

What exactly is that I am missing?

import React from "react";

import {Navbar, Nav, NavItem} from "react-bootstrap";



class Header extends React.Component{

    render() {

        return (

            <Navbar inverse>

                <Navbar.Header>

                    <Navbar.Brand>

                        <a href="#brand">Tweelyze</a>

                    </Navbar.Brand>

                </Navbar.Header>

                <Nav>

                    <NavItem eventKey={1} href="#">Link1</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                </Nav>

            </Navbar>

        );

    }

}



export default Header;

import React from "react";

import {Navbar, Nav, NavItem} from "react-bootstrap";



class Header extends React.Component{

    render() {

        return (

            <Navbar inverse>

                <Navbar.Header>

                    <Navbar.Brand>

                        <a href="#brand">Tweelyze</a>

                    </Navbar.Brand>

                </Navbar.Header>

                <Nav>

                    <NavItem eventKey={1} href="#">Link1</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                    <NavItem eventKey={2} href="#">Link2</NavItem>

                </Nav>

            </Navbar>

        );

    }

}



export default Header;

import React, { Component } from 'react';

import Header from "./NavigationBar"

class App extends Component {

  render() {

    return (

        <div><Header/></div>



    );

  }

}



export default App;

import React, { Component } from 'react';

import Header from "./NavigationBar"

class App extends Component {

  render() {

    return (

        <div><Header/></div>



    );

  }

}



export default App;

import React from 'react';

import ReactDOM from 'react-dom';

import App from './components/App';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

import React from 'react';

import ReactDOM from 'react-dom';

import App from './components/App';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

javascript reactjs navbar

asked Jan 4 at 0:37

Siddharth Sinha

165119

asked Jan 4 at 0:37

Siddharth Sinha

165119

asked Jan 4 at 0:37

Siddharth Sinha

165119

asked Jan 4 at 0:37

Siddharth Sinha

165119

asked Jan 4 at 0:37

Siddharth Sinha

165119

Please refer to this: react-bootstrap.github.io/getting-started/introduction

– joelgullander
Jan 4 at 0:45

You need to import a stylesheet as react-bootstrap doesn't come with styling per default

– joelgullander
Jan 4 at 0:46

add a comment |

Please refer to this: react-bootstrap.github.io/getting-started/introduction

– joelgullander
Jan 4 at 0:45

You need to import a stylesheet as react-bootstrap doesn't come with styling per default

– joelgullander
Jan 4 at 0:46

Please refer to this: react-bootstrap.github.io/getting-started/introduction

– joelgullander
Jan 4 at 0:45

You need to import a stylesheet as react-bootstrap doesn't come with styling per default

– joelgullander
Jan 4 at 0:46

add a comment |

1 Answer
1

active

oldest

votes

I don't think your bootstrap styles are being imported correctly.

Add this to your index.html (not index.js)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

you can also remove the import for it in index.js. Alternatively you can probably import it in index.js by using

import 'bootstrap';

answered Jan 4 at 0:50

cmoneylulz

314

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54031729%2fnot-able-to-align-menu-items-horizontally-in-navigation-bar%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I don't think your bootstrap styles are being imported correctly.

Add this to your index.html (not index.js)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

you can also remove the import for it in index.js. Alternatively you can probably import it in index.js by using

import 'bootstrap';

answered Jan 4 at 0:50

cmoneylulz

314

add a comment |

I don't think your bootstrap styles are being imported correctly.

Add this to your index.html (not index.js)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

you can also remove the import for it in index.js. Alternatively you can probably import it in index.js by using

import 'bootstrap';

answered Jan 4 at 0:50

cmoneylulz

314

add a comment |

I don't think your bootstrap styles are being imported correctly.

Add this to your index.html (not index.js)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

you can also remove the import for it in index.js. Alternatively you can probably import it in index.js by using

import 'bootstrap';

answered Jan 4 at 0:50

cmoneylulz

314

I don't think your bootstrap styles are being imported correctly.

Add this to your index.html (not index.js)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

you can also remove the import for it in index.js. Alternatively you can probably import it in index.js by using

import 'bootstrap';

answered Jan 4 at 0:50

cmoneylulz

314

answered Jan 4 at 0:50

cmoneylulz

314

answered Jan 4 at 0:50

cmoneylulz

314

answered Jan 4 at 0:50

cmoneylulz

314

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk