What is the best way to place division elements next to each other?

Is there a way to align the text "burger king" to the right of the logo on my webpage? I attempted using the bootstrap class pull-left, but it didn't produce any changes.

This is how my page appears:

body {
  font-size: 16px;
  background-color: #61122f;
  font-family: 'Oxygen', sans-serif;
}

#header-nav {
  background-color: gold;
}

#logo-img {
  width: 150px;
  height: 150px;
  margin: 10px 15px 10px 40px;
}

.float-container {
  border: 3px solid #fff;
  padding: 20px;
}
<!doctype html>
<html lang="en">

<head>
  <title>DEV RESTAURANT</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6865657e797e786b7a4a3f243b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <link rel="stylesheet" href="restaurant.css">
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-light ">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="pull-left" href="restaurant.html">
            <img id="logo-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Burger_King_logo_%281999%29.svg/640px-Burger_King_logo_%281999%29.svg.png" alt="burger king" class="d-inline-block align-text-top">
          </a>
        </div>

        <div class="navbar-brand">
          <a href="restaurant.html">
            <h1>Burger King</h1>
          </a>
        </div>

      </div>
    </nav>>

  </header>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

htmlcssbootstrap-4

Answer №1

I would utilize Bootstrap's pre-built flexbox classes:

<div class="container-fluid d-flex justify-content-start">


body {
  font-size: 16px;
  background-color: #61122f;
  font-family: 'Oxygen', sans-serif;
}

#header-nav {
  background-color: gold;
}

#logo-img {
  width: 150px;
  height: 150px;
  margin: 10px 15px 10px 40px;
}

.float-container {
  border: 3px solid #fff;
  padding: 20px;
}
<!doctype html>
<html lang="en">

<head>
  <title>DEV RESTAURANT</title>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130c130d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <link rel="stylesheet" href="restaurant.css">
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-light ">
      <div class="container-fluid d-flex justify-content-start">
        <div class="navbar-header">
          <a href="restaurant.html">
            <img id="logo-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Burger_King_logo_%281999%29.svg/640px-Burger_King_logo_%281999%29.svg.png" alt="burger king" class="d-inline-block align-text-top">
          </a>
        </div>

        <div class="navbar-brand">
          <a href="restaurant.html">
            <h1>Burger King</h1>
          </a>
        </div>
      </div>
    </nav>
  </header>


  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Answer №2

If you're looking to arrange div elements side by side, Bootstrap’s grid system may be the solution you need. Check out the code snippet below:

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

To ensure proper alignment, consider using the align-items-center class from Bootstrap.

For more details, you can refer to the documentation at: https://getbootstrap.com/docs/4.0/layout/grid/ and also visit TutorialRepublic.

Answer №3

<!doctype html>
<html lang="en">

<head>
  <title>DEV RESTAURANT</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffdf0f0ebecebedfeefdfaab1aeb1af">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <link rel="stylesheet" href="restaurant.css">
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-light ">
      <div class="container-fluid">
        <div class="navbar-header">
          <a href="restaurant.html">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Burger_King_logo_%281999%29.svg/640px-Burger_King_logo_%281999%29.svg.png" alt="burger king" height="75" width="75"> Burger King:
          </a>
        </div>
      </div>
    </nav>
  </header>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

For a while now, I've been attempting to transform my paragraph into a block within a section that showcases elements in an inline-flex layout

I have been attempting to adjust the paragraph with the errorDate class so that it displays as a block element directly beneath the input element similar to the image provided here. The section is currently set to appear as an inline-flex. Below is the CS ...

htmlcss

Preserving CSS styling while loading an HTML page with InnerHTML

By using the following code snippet, I have successfully implemented a feature on my website that allows me to load an HTML page into a specific div container when clicking a link in the menu. However, I encountered an issue where the background color of ...

javascriptcssajaxinnerhtml

An issue encountered while employing the mix function in LESS within a Rails environment

Applying the less-rails gem. Implementing this code snippet to blend two colors: @base: #ffdc52; @add: #195742; .colour{ color: mix(@base, @add); } Encountering the subsequent error message: Less::ParseError: error evaluating function `mix`: Cannot ...

ruby-on-railscsslessparse-errorless-rails

Disabling a checkbox within an onClick event handler

I'm facing an issue where I have a checkbox with the type "checkbox" and I'm using JAWS to read it. The problem is that in IE11, JAWS reads a disabled checked checkbox as unchecked, which I believe is a bug in IE. To work around this, I need to r ...

javascripthtmlcheckbox

Troubleshooting a Minimum Width Problem in HTML and CSS

Having trouble with setting a minimum width for a specific section. When the browser size is smaller than the set minimum width, the background color/image defined by CSS does not expand beyond the window size. Essentially, when scrolling horizontally to v ...

htmlcss

Tips for expanding the width of Bootstrap modal using animation

Is there a way to resize my Bootstrap 5 modal width and add an animation effect when it expands? I've tried using animate and transition in my style-css but haven't had any success so far. I've looked at other solutions online, but none seem ...

javascriptcssbootstrap-modalbootstrap-5

Exploring Bootstrap 4 Beta Pagination with CodeIgniter

Struggling to blend the stylish Bootstrap 4 Beta elements with CodeIgniter pagination $config in my web app. Any tips on how to seamlessly integrate them? ...

codeigniterbootstrap-4

Adapting the position of a table row in AngularJS based on the

I need assistance with creating a dynamic table-row that moves to indicate the current time in a table filled with timestamps. <table> <tr ng-repeat="timestamp in timestampArray"> <td>{{timestamp}}</td> </tr> ...

javascriptangularjshtml

Switch the color of the final letter

Sample code snippet: <p class="test">string</p> Looking to dynamically change the color of the last letter, specifically the letter "g", using CSS only, without relying on JavaScript. I am displaying the string character by character and nee ...

htmlcss

Maintain correct aspect ratio when zooming in the body

I'm facing a challenge with my single-page web application that has fixed width and height. It doesn't scale properly to fit the page at all times. Scaling based on its width works fine, but I want to achieve scaling from both width and height w ...

jquerycsszoomingaspect-ratio

What is the best way to eliminate tags from a BeautifulSoup-scraped list?

When using beautifulsoup to scrape a page, I am trying to extract the "title" by searching for specific tags: title = [text.find_all('h1', {'class', 'entry-title'}) for text in texts] The resulting output is a list like this: ...

pythonhtmlbeautifulsouptags

Ways to conceal #div element from displaying in the href attribute within the anchor tag

My anchor tag has an href attribute that looks like this: <a onclick='loadReview(\"" + strexternalURL + "\");' href='#productName1'. When clicking on it, the URL appears as http://localhost:54986/Dealerlist.aspx#productName ...

javascriptjqueryhtmlasp.netcss

In the production and development environments, the interpretation of CSS classnames is being rearranged

Currently utilizing create-react-app v2. I've encountered an issue with a component that has multiple classnames: "x15 x14 login-form__field". Strangely, in the production build, the order of '.x14' and 'login-form__field' seems t ...

cssreactjswebpacksasscreate-react-app

Unable to download the jQuery Plugin

I am looking to install a gallery without using flash, and I came across this jQuery plugin called Grid-A-Licious. However, I am having trouble figuring out how to install and use it since it is distributed as a .zip archive with two .js files but no index ...

javascriptjquerycsspluginsgallery

The element is unclickable due to being obstructed by another element

https://i.sstatic.net/pomMS.png My task is to click on a button using this code: browser.find_element_by_id('btnSearch') However, the button is being blocked by a div tag with the following attributes: <div id="actionSearch" class="row pull- ...

pythonhtmlcssseleniumselenium-chromedriver

Utilizing jQuery for capturing user input on an HTML text field

I'm working on a text input field where I want to show the pound sign along with a specific value. This is what I tried: let price = '5.25'; jQuery('#input_field').val('&pound;' + price); However, all that shows up ...

jqueryhtml

Utilize specific CSS attributes from a class and apply them to a DOM element

It's clear that the question at hand is more complex than it initially appears. I'm not just looking for a way to apply a CSS class to a DOM element, as I'm already familiar with that (<div class="MyCssCLass"></div>) My goal is ...

javascriptjqueryhtmlcss

Creating this design using only HTML and CSS is possible by following these steps

I attempted to create this design using only HTML and CSS but unfortunately couldn't achieve it. Can anyone provide me with some assistance? Thank you in advance Check out the image on imgur.com ...

htmlcss

What causes Font Awesome 5 icons to vanish when changing the font-family?

I am facing an issue with the code I have below. It changes the font style successfully, but it also causes the icon to disappear. Can anyone provide tips on how to ensure that the icon remains visible while changing the font style? <link rel="styles ...

cssfont-awesomefont-awesome-5

Can we dynamically adjust font size based on the width of a div using CSS?

My div is set to 70% width and I have a specific goal in mind: To fill that div with text To adjust the font size so that it takes up the entire width of the div https://i.stack.imgur.com/goVuj.png Would it be possible to achieve this using only CSS? B ...

htmlcssfontsresponsive-designfont-size