create a layout, header, navigation

what would css classes look like for the header, mainmenu classes  , if I want to equal space between the li elements in following construct.

also , if mainmenu div appears at the bottom of the header, and is centered, of the header div.

I'm using bootstrap , so I have wrapped everything inside the container class, but I don't want to use navigation classes from bootstrap.

<div class="container">
   <div class="header">
      <div class="mainMenu">
    </div> ----end of header


Open in new window

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

The navigation / menu is not only CSS it is also Javascript.
The navigation that come with Bootstrap is very basic.

Such mechanism is complicated (Reponsive media queries, nice looking CSS, Javascript)
To save time I recommend you to use a ready solution at low price
Scott FellDeveloper & EE ModeratorCommented:
It would be easier to start with an example of what you want. What is it about the bootstrap nav you don't like?  Did you look at this example?

<nav class="nav d-flex justify-content-between">
          <a class="p-2 text-muted" href="#">World</a>
          <a class="p-2 text-muted" href="#">U.S.</a>
          <a class="p-2 text-muted" href="#">Technology</a>
          <a class="p-2 text-muted" href="#">Design</a>
          <a class="p-2 text-muted" href="#">Culture</a>
          <a class="p-2 text-muted" href="#">Business</a>
          <a class="p-2 text-muted" href="#">Politics</a>
          <a class="p-2 text-muted" href="#">Opinion</a>
          <a class="p-2 text-muted" href="#">Science</a>
          <a class="p-2 text-muted" href="#">Health</a>
          <a class="p-2 text-muted" href="#">Style</a>
          <a class="p-2 text-muted" href="#">Travel</a>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mikhaAuthor Commented:
@Scott  - thanks. this was helpful. looks like the new bootstrap has more flexibility. I am very new to building layouts and design.
the example you provided is very good. one more thing I'm not sure about is , when we design layout of the page, now we can use bootstrap
navigation, container and grid system, which automatically adjusts based on the device or width of the screen.

if I have a table that I don't want adjust based on the screen, what's the best way to do this. set a fixed width for the table?
will this be possible , if i want to use bootstrap grid to create a table ?
Ensure Business Longevity with As-A-Service

Using the as-a-service approach for your business model allows you to grow your revenue stream with new practice areas, without forcing you to part ways with existing clients just because they don’t fit the mold of your new service offerings.

Scott FellDeveloper & EE ModeratorCommented:
You can use tables,

In some cases, you may want to hide columns on small screens though.
mikhaAuthor Commented:
@scott -thanks again.

Do you an example of hiding columns as well ?
Scott FellDeveloper & EE ModeratorCommented:
For this question, let's stay on topic of your navigation. Getting into tables would be best for a new question thread to keep things separated and in order.

Here you will have different menu setup with the basic Bootstrap
to get the code just right click, view page source

for table you can use Datatables that have all the features like hiding column and have Bootstrap theming
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.