0

I am building a React Website with ReactBootstrap. I did Navbar and Carousel with ReactBootstrap and Footer.js component with MdBootstrap. After I Imported Bootstrap.min.css on my Footer.js, the Carousel.jsx and CustomNavbar,jsx are not full width anymore.

Here my Footer.js

Here a screenshot of Navbar and Carousel

Here a screenshot of the Footer

Maybe the bootstrap.min.css on my Footer.js overwrite the bootstrap.min.css ref on the index.html? I really do not know a solution.

Could please someone help me?

Thanks,

Nic

Nico90
  • 13
  • 6

1 Answers1

0

Thats because your'e using a Container without setting it to fluid.

You can have a look at the bootstrap documentation here

You just need to add a className of container-fluid.

From the docs:

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).

Use .container-fluid for a full width container, spanning the entire width of the viewport.

Community
  • 1
  • 1
Matan Bobi
  • 2,693
  • 1
  • 15
  • 27
  • Hi @Matan Bobi, thanks for your reply, I added className="container-fluid" into some parts but no changes :( here a screenshot: https://imgur.com/uqKCw18 – Nico90 Apr 16 '18 at 09:38
  • @Nico90 That's because `className="container-fluid"` is used on Container element only. for fluid Navbar you will need to supply `fluid=true` on the component. you can look at the docs here: react-bootstrap.github.io/components/navbar – Matan Bobi Apr 16 '18 at 11:10
  • Hi @Matan Bobi, I got a better result adding true as you can see on this screenshot https://imgur.com/tEZSG99 here my navbar and carousel now https://imgur.com/CVCddx3 On error I read I have to put fluid=true, I do not understand where i have to write it. If I write fluid=true on the rows I get errors too. – Nico90 Apr 16 '18 at 12:25
  • `fluid={true}` should be set on the Navbar element only and not on all of its children. – Matan Bobi Apr 16 '18 at 13:31
  • here my code now https://imgur.com/ynDPNTJ but no changes on the navbar. Now I do not have errors messages. – Nico90 Apr 16 '18 at 13:45
  • Try wrapping it with a Container with `fluid={true}` – Matan Bobi Apr 16 '18 at 13:50
  • here my code https://imgur.com/QA0po33. I got a padding as you can see here https://imgur.com/vUDublr – Nico90 Apr 16 '18 at 13:59
  • @Nico90 have a look at this: https://stackoverflow.com/questions/25427407/bootstrap-3-container-fluid-with-grid-adding-unwanted-padding Btw, This probably is a different question. the question you originally asked was solved so in that case you should open a new question if you don't find the answer already. If I answered your question, Please mark it as answered for later on searches – Matan Bobi Apr 16 '18 at 14:17
  • Ok, now I have to fix the Navbar so it will display the items inline and remove the padding right and left. For this I opened a new topic. Thank you for your help. Nico – Nico90 Apr 16 '18 at 17:55
  • here the link: https://stackoverflow.com/questions/49863465/display-reactbootstrap-navbar-inline – Nico90 Apr 16 '18 at 17:57