Position offset for container in Bootstrap 4

Within my webpage, I have incorporated two bootstrap containers - one placed inside the header navbar and the other below it. Both containers contain text content. My goal is to shift the text within the navbar container 15px to the left for all responsive breakpoints.

I attempted to achieve this by applying a negative margin as shown in the code snippet below:

<nav class="navbar px-0 navbar-light fixed-top bg-primary">
    <div class="container"><div style="margin-left: -15px;">Text1</div></div>
</nav>
<div class="container" style="margin-top: 50px;">Text 2</div>

You can view an example on JSFiddle.

While this approach does work, it does have a significant issue. As the browser width decreases, the text within the header navbar extends beyond the screen. Is there a way to prevent this from happening? It's clear that using @media queries could solve the problem, but I believe there might be a better solution.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

By properly nesting elements in Bootstrap, you can achieve a left-aligned layout. Utilizing the .row class will offset the 15px left padding on .col-xx-xx by providing -15px to the left. To maintain consistency, consider adding 15px padding to other containers while retaining the default bootstrap container max-width for the navbar, preserving the 15px padding on mobile and tablet devices.

<nav class="navbar px-0 navbar-light fixed-top bg-primary">
  <div class="container">
    <div class="row">
     <div class="col-sm-12">Text</div>
    </div>
  </div>
</nav>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="container-inner">Text</div>
    </div>
  </div>
</div>

Check out this Codepen Example

Answer №2

For the navbar section, consider using navbar-fixed-top in place of fixed-top. In Bootstrap 4, adjust the margin-left by utilizing the default css classes like ml-1, ml-2, etc. and padding with pl-1, pl-2.

Check out more about Bootstrap 4 spacing here: Ref Bootstrap 4 spacing

<nav class="navbar navbar-default navbar-fixed-top bg-primary">
  <div class="container">
    Text 1        
  </div>
</nav>
<div class="container">
    <div class="ml-4 mr-4">
     <p>Text 2</p> 
    </div>
</div>

Test your solution here: https://jsfiddle.net/testdesigner/aq9Laaew/193572/

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

What is the best method to pass a JavaScript file array to a Node.js server?

Is it possible to transfer data from a Javascript file linked to an HTML page to a Node.js file on a post route without displaying it on the HTML page? If so, what is the best way to accomplish this? ...

javascripthtmlnode.js

What could be causing the slider to have a choppy transition between images?

The Issue: Looking at this GIF, you can see that the image transitions are not seamless. The slider is built on Bootstrap. I am also trying to ensure that the slider's body does not always adjust to the new image but maintains a minimum size. I have ...

htmlcssbootstrap-5

What is the proper way to specify the type for a <video> element reference in React when utilizing Typescript?

I have been experimenting with controlling the play/pause state of a video in React.js using ref's. My code functions correctly but I am encountering tslint errors that I am currently trying to diagnose: function App() { const playVideo = (event:a ...

htmlreactjstypescriptdomuse-ref

Customize the appearance of radio buttons with unique colored outer and inner circles

I am in need of creating a MUI radio button that features a unique outer ring color compared to the selected inner fill color. Although I have reviewed the official documentation, it appears that customization options only allow for changing the color as ...

cssreactjsmaterial-uiradio-button

Angular MistakeORAngular Error

Every time I refresh the page, I encounter an error in my code while attempting to display a newly edited and saved text. I've initialized the variable, made the access variable public, but it still doesn't work. Can someone point out what I migh ...

javascripthtmlangulartypescript

Steps to implement the selection of multiple items from a drop-down or list on a React.js website

Hi there, I am a newcomer to the world of React JS web development. I am looking for guidance on how to implement a feature where users can select multiple cities from a drop-down or list, similar to the examples shown in image1. Once the user has made th ...

htmlcssreactjsbootstrap-4bootstrap-multiselect

Techniques on how to activate checkbox modification through card clicks

Is it possible to toggle the checkbox value by clicking on a card? <input id="{{a.switchID}}" name="value1" style="display:none;" type="checkbox" ng-click="send(a.deviceID,a.pinNumber,a.switchID,value1)" ng-model="value1" ng-true-value="1" ng-false-v ...

htmlangularjs

Is there a way to automatically scroll to the top on refresh or load without using Jquery in AngularJs or Js?

One issue I'm facing is trying to set the page to scroll to the top when it loads. However, Chrome, IE, and Firefox are currently resetting the scroll position to where it was on the previous page. How can I achieve this? It appears that scrollTo doe ...

javascripthtmlcssangularjs

Issue with CSS background images not resizing properly on iPad and iPhone devices

While my site's background image resizes nicely in Chrome and Safari using background-size: cover, I encountered an issue when testing it on an iPad or iPhone. The CSS background image appears to be extremely zoomed in, resulting in a horrible appeara ...

htmlioscss

Use jQuery to create a price filter that dynamically sets slide values based on the filter object

I'm currently utilizing the jQuery slide filter to sort products based on price. The filtering value is set within the script, but I am interested in dynamically setting it based on the highest/lowest number found on my page using a data attribute. D ...

javascriptjqueryhtml

Unable to be implemented using inline-block styling

I'm struggling to get these 2 elements to display side by side using inline-block, I've tried everything but nothing seems to work. Goal: https://i.sstatic.net/3JfGC.png First element https://i.sstatic.net/GVq91.png https://i.sstatic.net/BIG0D ...

htmlcsstwitter-bootstrapvue.js

Modify table row background color using PHP based on its position in the table with the use of a function

I am having trouble formatting my table to highlight different rows in distinct colors. The top row should be one color, the second row another, and the bottom two rows a different color each. This is to represent winners, teams getting promoted, and tho ...

phphtmlmysqlcss

What is the most efficient way to organize an array by date?

Here is the data I have: const data = [{date: "2022-05-10 13:36:00", open: 155.535, low: 155.4, high: 155.67, close: 155.44}, {date: "2022-05-10 13:35:00", open: 155.23, low: 155.2102, high: 155.62, close: 155.53}, {date: "2022-05 ...

javascripthtmlalgorithmsorting

Hovering on the division element will only trigger an effect when the mouse

Currently working on designing a navbar, where each button consists of a <div> for the box and an anchor tag for text along with a hyperlink. The challenge I'm facing is changing the color of the div when hovering over it. Adding a :hover pseud ...

htmlcss

Utilizing AngularJS 1.X to implement filters on transformed information

When using the combination of ng-repeat and a filter, it creates a highly effective search function. However, once the data is converted, the use of a filter for searching becomes limited. For Instance JavaScript $scope.ints = [0,1,2,4,5,6,7,8,9, ..., 9 ...

javascriptangularjshtml

What is the best way to trigger click events within a select dropdown using Angular?

I have implemented two buttons (month, year) that trigger different events. Now, I want to replace these buttons with a select element. Can you guide me on how to achieve this? Here is my current code: // Button implementation <button class="menu-butt ...

htmlangulardom-eventseventemitter

Validation of dynamically generated name fields using radio button group

CODE: html <form id="myform" type="post"> <fieldset id="myid1"> <input id="entries_8490_burn_id_1" name="entries[8490][burn_id]" value="1" type="radio"/> <input id="entries_8490_burn_id_2" name="entries[8490][burn ...

javascriptjqueryhtmlradio-button

The compatibility of Datatables responsive feature with ajax calls appears to be limited

I recently started using the datatables plugin and have encountered an issue with responsive tables. While I successfully implemented a responsive table and an AJAX call on a previous page, I am facing difficulties with it on a new page for unknown reasons ...

javascriptjqueryhtmlajaxdatatables-1.10

Guide on setting the HTML img src value with AR.ImageResource in ARchitectBrowser.html while utilizing the Wikitude SDK for iOS

I am currently customizing the ARchitectBrowser.html file provided by the Wikitude SDK for iOS and I am interested in finding a way to directly insert an image set in AR.ImageResource. bubbleImage = new AR.ImageResource("http://graph.facebook.com/" + json ...

javascripthtmlioswikitude

What are some ways to accomplish this task without relying on a photo editing tool?

Is it possible to swap the image link: https://i.sstatic.net/Wa4mo.jpg with this new link: https://i.sstatic.net/hqVuQ.jpg without having to use a photo editor? Below is the CSS and HTML code: I was unable to upload the logo due to the restrictio ...

javascriptjqueryhtmlcss