Position the content below a Bootstrap row with the columns above being offset

Having trouble aligning content below a row of anchors/divs that require an offset-md-1. The challenge is making sure the content below aligns with the row above, which has the offset and remains responsive. Adjusting margins on paragraphs causes overflow when the viewport shrinks. Setting a max width with margins auto isn't feasible since the above row isn't exactly centered by design. Any suggestions? Thank you :)

HTML:

      <div class="container">
        <div class="row">
          <a class="offset-md-1 col-md-3 jump-link" href="#">
            <div><p class="font__jump-link">Jump Link 1 offset1</p></div>
          </a>
          <a class="col-md-3 jump-link" href="#">
            <div><p class="font__jump-link">Jump Link 2</p></div>
          </a>
          <a class="col-md-3 jump-link" href="#">
            <div><p class="font__jump-link">Jump Link 3</p></div>
          </a>
        </div>
        <div class="row">
          <p class="p-below-links">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda at 
            commodi dicta, doloremque
            earum eius libero neque repudiandae soluta.</p>
        </div>
      </div>

CSS:

.p-below-links{
 max-width:1050px
 width: 100%;

Answer №1

Is it not possible to simply use the same offset? In general, all content within a Bootstrap website should adhere to the grid system for consistent behavior.

<div class="container">
  <div class="row">
    <a class="col-3 offset-xs-1 jump-link" href="#">
      <div>
        <p class="font__jump-link">Jump Link 1 offset1</p>
      </div>
    </a>

    <a class="col-3 jump-link" href="#">
      <div>
        <p class="font__jump-link">Jump Link 2</p>
      </div>
    </a>

    <a class="col-3 jump-link" href="#">
      <div>
        <p class="font__jump-link">Jump Link 3</p>
      </div>
    </a>
  </div>

  <div class="row">
    <div class="col-9 offset-xs-1">
      <p class="p-below-links">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda at commodi dicta, doloremque earum eius libero neque repudiandae soluta.</p>
    </div>
  </div>
</div>

Fiddle demo

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

Reducing the amount of nesting within selectors

Check out this code snippet: .signin-input{ input{ width: 100%; height: 2.5rem; color: black; :placeholder-shown{ opacity: 1; } } The CSS result looks like t ...

The issue of error messages not appearing under input fields in Bootstrap 4 and Laravel 5.6 has been puzz

In my Laravel 5.6 project, the blade file contains the following code: <form method="POST" action="/review"> @csrf {{ $errors->first('nickname') }} <input type="hidden" nam ...

Using Google-Prettify with AngularJS

I have been attempting to implement Google Prettify in my AngularJS project. It seems to be functioning correctly on the main page, but once I navigate to another route using Angular (after ng-view), it stops working properly. You can check out the plunker ...

How to set DateTimePicker value using ASP.NET MVC Razor?

How can I successfully set the value of Bootstrap's DateTimePicker? @using (Html.BeginForm("Index", "ObjectClass", FormMethod.Post, new { })) { <div class="col-md-7"> From @Html.TextBoxFor(model => Model.helpVM.date1, n ...

Creating a circular price display using CSS:

Below is the code snippet that I am working with: .special-price { text-align: center; background-color: #2e566e; } .special-price .offer { border-radius: 50%; background-color: #56c243; color: #fff; font-weight: 700; font-size: 18px; h ...

Retrieve the content of the nearest 'td' element using the '.closest()' method, then locate the desired

I am struggling to assign the value from a <td> to a variable. My approach involves utilizing the closest() and find() methods in jQuery to locate the desired <td>. Interestingly, when I use alert on the <td>, it displays the correct val ...

Replace the single text area with multiple div elements and update the image within each div

Within the 'Pinctitle' area, there is text that I want to change each time a Pselectorbutton is hovered over with a fading effect. Additionally, I would like the image inside the 'Pselectorbutton' to change at the same time. Currently, ...

The functionality of jQuery on hover is not compatible with Bootstrap tree view

My issue arises when the jQuery onhover function does not trigger the anonymous function as expected. Here is my current HTML structure: $(document).ready(function () { $.ajax({ url: "fetch.php", method: "POST", ...

Saving information to a hidden div using jStorage

Currently, I am utilizing jStorage for storing data in local storage. When I store the data using console.log() and later retrieve it using $.jStorage.get(), I found that the values are not being assigned to the hidden div. Can someone provide guidance o ...

Distorted image display on Bootstrap card in Internet Explorer

My layout includes bootstrap v4 cards, but I'm having issues with distorted images in Internet Explorer 11. It seems that IE is not recognizing the height: auto attribute from the img-fluid class. Should I set a custom height for the card images? Inte ...

Issue with showing multiple images on HTML page

I'm currently working on enhancing my webpage by enabling the upload of multiple images. However, I'm facing challenges in figuring out how to obtain a valid URL for the image source and to verify if the correct number of files have been uploaded ...

How can I adjust the position of a circular progress bar using media queries?

My code involves creating a circular progress bar. However, I am facing an issue where the circles stack on top of each other when I resize the window, as shown in the output screenshot. I want to ensure that the position of the 3 circles remains fixed whe ...

Multiple Bootstraps Modals Opening Simultaneously Instead of Only One Modal Showing at a Time

Currently, I am facing an issue on my page with multiple links that are supposed to open unique modal windows. However, whenever I click on any link, all the modal windows are being triggered to open at once. I need a solution to ensure that only the rele ...

Guide on implementing ng-options and ng-init functionalities in AngularJS

I need help with displaying the ProjectID's in a drop-down list format where users can select one value. Can you provide an example on how to achieve this? [ { "ProjectManagerID": 4, "ProjectID": 4, "ResourceID": 4, "Deleted": false ...

Creating a unique look for SELECT (Option) tags using gradients and a personalized arrow design

Feel free to check out my full HTML code here. You can simply copy and paste it into a demo document on your local machine to see exactly what I'm talking about. My goal is to style the boxes to include both a gradient background AND a unique arrow o ...

Utilizing CSS selectors to pinpoint specific elements on a webpage

As I continue to enhance my CSS skills, I stumbled upon a challenging puzzle that requires me to figure out how to select each individual image on a webpage using selectors. Here is the provided HTML code: <!DOCTYPE html> <html> <head> ...

Beside the element, a dropdown navigation menu emerges

Trying to work on a dropdown menu here. It appears to be functioning, but there's a small issue - the dropdown shows up on the right side of the element instead of directly below it. I have a feeling it has to do with either position or padding, but I ...

Guide on hiding the sidebar in mobile view and enabling toggling on click for both mobile and other devices with the use of vue.js and bootstrap4

I need assistance with transitioning my code from pure Bootstrap4 and JavaScript to Vue.js. When I tried implementing it in mobile view, the sidebar is not showing. Below is the code snippet that I am trying to change for Vue.js, but I keep encountering an ...

Reduce multiple paragraphs in PHP to a more concise form

Is there a way to trim paragraph content to 100 characters, especially when dealing with multiple paragraphs? For example, consider the following HTML snippet: <div class="div-1"> <div class="section-1"> <p>"Lorem ipsum ...

Pan motion gesture above HTML components

Is it possible to create a hovering effect over elements in a container using a pan gesture? https://i.sstatic.net/E6G56.gif Here's the HTML code: <div class="container"> <div class="item"></div> <div class="item"></div ...