Known Participant

Question

bootstrap 4 navbar centered

Forum|Forum|2 years ago
January 8, 2024
6 replies
1135 views

Hi. I have been creating websites using bootstrap 4, but I'm finding my sites look like cookie cutter sites lol. Please take a look if you wish.

center4familydevelop. com
animaltrainer. biz
hoovesfortheheart. org
adoptattachtherapy. com/index.html
attachment-focusedtreatmentinstitute. com

So now I'm building my own website and my question is about the bootstrap navbar.

Question #1 - most important - How can I make the navbar logo stay to the left, the navigation links centered, and phone and email on the right? I've been searching and trying to do this for some time.

I'd appreciate any answers.

Question #2 - I also did some research on the percentage of Word Press sites and bootstrap sites. It seems that 40% of websites are done in Word Press. Do you all find that to be true?

Question #3 - What would be the best way to code a website without using bootstrap or wordpress?

Could really use some insight.

Thanks so much!

Thank you.

This topic has been closed for replies.

BenPleysier

Community Expert

Adding to what @osgood_ has said about centering the navigation items, copy and paste the following code into a new document.

<!doctype html>
<html>

<head>
  <base href="/">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Untitled Document</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
  <link rel="stylesheet" href="/css/style.css" />
</head>

<body>
  <header class="">
    <div class="container">
      <div class="row">
        <div class="col">
          <nav class="navbar navbar-expand-lg  justify-content-between">
            <a class="navbar-brand me-auto ms-auto" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center" id="navbar1_collapse">
              <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home</a>
                <a class="nav-item nav-link" href="#">About</a>
                <a class="nav-item nav-link" href="#">Contact</a>
              </div>
            </div>
            <div class="navbar-nav justify-content-end d-none d-lg-flex ms-md-auto">
              <a class="nav-item nav-link" href="#"><i class="fa fa-slack"></i></a>
              <a class="nav-item nav-link" href="#"><i class="fa fa-twitter"></i></a>
              <a class="nav-item nav-link" href="#"><i class="fa fa-facebook"></i></a>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </header>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>

This the result:

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

O

osgood_

Legend

Question #1 - most important - How can I make the navbar logo stay to the left, the navigation links centered, and phone and email on the right? I've been searching and trying to do this for some time.
I'd appreciate any answers.

By @beng2000

This sounds to me to be a waste of time as putting the telephone no. and email on the same line as the main navigation will take up too much space unless you only have a few navigation links or are intending to deploy a hamburger navigation as the starting default.

Having said that have you explored using the Bootstrap utility classes for flexbox positioning.....which will space out your containers so they can be positioned left, centre, right.

Nancy OShea

Community Expert

This sounds to me to be a waste of time as putting the telephone no. and email on the same line as the main navigation will take up too much space....

By @osgood_

========

Not if you're creative about it.

For economy of space, I put the brand above the navbar and use space-saving icons with tooltips for search, mail list, contact, phone & social media. There's more than ample space for icons so it works well on small & large devices.

https://icons.getbootstrap.com/

Likewise, text based contact info is in the footer and appears on every page.

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

Not if you're creative about it.

For economy of space, I put the brand above the navbar and use space-saving icons with tooltips for search, mail list, contact, phone & social media. There's more than ample space for icons so it works well on small & large devices.
https://icons.getbootstrap.com/
Likewise, text based contact info is in the footer and appears on every page.

By @Nancy OShea

I agree but you have had to move the branding to another location, by default Bootstrap doesnt do that, which lve always thought a bit dumb myself.. To assume every company has six or seven characters in the name or tiny logo is a hideous oversight and not very well thought through.

And l will just add l was commenting on how the OP suggested they wanted to layout the structure, branding left, nav center, tel/email right, not how you have executed it which seems far more achievable to me.

O

osgood_

Legend

Question #2 - I also did some research on the percentage of Word Press sites and bootstrap sites. It seems that 40% of websites are done in Word Press. Do you all find that to be true.

By @beng2000

It's not surprising to be honest, anything that's free will be used more than something that is not. WordPress not only serves the amateur developer market but also the professional developer market, so add the 2 together and you arrive at a high number..........similar to Bootstrap. Both probably wouldn't be as popular if you had to pay a fee to use them.

Having said that l think you have to make a decision...........if youre going to use WordPress then focus on it fully and get to know it, inside out, explore how it works rather than just relying on drag/drop/click/select components, plugins. There's still a good appetite for WordPress developers in the jobs market so it's not an entirely waste of time getting to know it rather well.

Question #3 - What would be the best way to code a website without using bootstrap or Wordpress

By @beng2000

Manually, you can't beat coding manually but it will take years of practice. It's satisfying and fulfilling to know you're in total control and will open up better opportunities if youre going to be in this game for the long haul. Some will have the passion to want to understand what it is they are actually doing, others won't and will take the quick fix route such as using libraries and frameworks. It's your choice, short term gain versus long term return and better opportunities.

BenPleysier

Community Expert

This is slightly off topic, but I thought it important enough to show here.

In this video, I play around with the colour themes available in Bootstrap 5.3. This may help you to switch from the depricated version 4 of Bootstrap. Please enjoy.

https://youtu.be/zsPaZOqe2eA?si=71LEYUe-HB4xuCDu

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!