CSS: Issue with proper functioning of border-top

I'm currently working with Bootstrap and trying to resolve an issue with the border. Right now, it's only appearing above the text due to the pull left and right classes. How can I adjust this so that the border spans across the entire line?

HTML

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="pull-left">
          <footer class="footer"><p>text1</p></footer>
        </div>
        </div>
    <div class="col-md-6">
      <div class="pull-right">
         <footer class="footer"><p>text2</p></footer>
      </div>
    </div>
  </div>
</div>

CSS

.footer {
    padding-top: 19px;
    margin-top: 7px;
    color: #777;
    border-top: 1px solid #e5e5e5;
}
htmlcsstwitter-bootstrap

Answer №1

Modifying your markup is necessary to achieve this.

To enhance the styling of your footer row, consider adding a suitable class like footer-row and then apply styles accordingly:

HTML

<div class="container">
  <div class="row footer-row">
    <div class="col-md-6">
      <div class="pull-left">
          <footer class="footer"><p>text1</p></footer>
        </div>
        </div>
    <div class="col-md-6">
      <div class="pull-right">
         <footer class="footer"><p>text2</p></footer>
      </div>
    </div>
  </div>
</div>

CSS

.footer-row {
    padding-top: 19px;
    margin-top: 7px;
    color: #777;
    border-top: 1px solid #e5e5e5;
}

Bootply

Answer №2

Revise your code in the following way:

<footer class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="pull-left">
          <p>text1</p>
        </div>
        </div>
    <div class="col-md-6">
      <div class="pull-right">
        <p>text2</p>
      </div>
    </div>
  </div>
</footer>

To fix the issue, eliminate the duplicate footer element and add the container class to expand the entire width while maintaining a single footer when resized.

This approach not only resolves the problem but also ensures semantic correctness by having only one footer element.

I have included a Bootply for demonstration purposes.

Answer №3

For a balanced layout with text 1 and text 2 each taking up half of the div, consider placing the footer tag spanning all columns as a single element. Then nest text one and text two in separate divs with columns set to 6 each.

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

Passing multiple values using a single variable in Django templates

I'm working on a customized search form for cars that includes various inputs categorized by specific criteria like condition, color, and size. Users can select from multiple options within each category. So my dilemma is: How do I pass multiple value ...

javascripthtmldjango

I'm curious, who's in charge of determining the height and width in Chrome dev-tools?

There are moments when I feel overwhelmed, struggling to identify the culprit behind certain property values in elements. It can be quite a challenge to pinpoint the source of the issue. Does anyone have any tips for approaching a situation where you arri ...

javascriptcssgoogle-chromegoogle-chrome-devtools

I want to create a feature on my website where users can generate a random password by clicking a button on the password field. This will

After setting up a form in HTML that connects to a function in views.py within the Django framework, I decided to enhance it by adding a button that automatically populates the password field with a randomly generated password. To achieve this, I utilized ...

javascripthtmldjangopyscript

Utilize CSS to create a visual buffer at the bottom of the header

I'm having trouble creating a gap between the bottom of "headermenu" and the top of "list". No matter what values I use for margin-bottom or padding-bottom, the table won't budge. I could try adding margin-top to the table, but I would prefer to ...

htmlcss

Retrieving information from a JavaScript array outputs 'undefined'

I am currently attempting to retrieve the attribute labeled "MediaURL" from my Javascript array object. To provide a clearer understanding, the image below illustrates an expanded view of the array: https://i.sstatic.net/BWNym.png Encountering the follow ...

javascripthtmlarraysjson

What is the best way to implement an effect based on the movement or position of the mouse?

I have 3 buttons positioned absolutely: .micro { position:absolute; } #micro_1 { left:1165px; top:176px; } #micro_2 { left:800px; top:300px; } #micro_3 { left:300px; top:400px; } I am looking to create a fading effect on these 3 elements based on the ...

javascriptjqueryhtmlcssmousemove

Enlarging and cutting video footage

I have developed an app that features a code enabling users to capture photos using their computer-connected camera. How it Works: A webcam is utilized to display a video element with the camera as its source: function onSuccess (stream) { this.video.s ...

javascripthtmlwebrtcwebcam

Sliding the content in React

My current project involves creating a content slider in React. While I have made some progress, I am facing a challenge in making the content move horizontally instead of vertically. Currently, all the items are stacked on top of each other, preventing th ...

cssreactjsanimationslider

Tips for converting multiple arrays of objects into a single array set

Here is an example of an array: $scope.array1=[[Name:'Madhu'],[Name:'Vijay'],[Name:'Srinu']] I need to convert this array into a different format. I want to pass this array in the columns option of a dx datagrid. So the desi ...

htmlangularjs

"Showcasing a pair of icons side by side in an HTML layout

I need assistance with formatting two legends on the form. I want both legends to be displayed side by side instead of one on top of the other. Here's how I want it: -----legendOne---LegendTwo----- What CSS code do I use to achieve this layout? Be ...

htmlforms

Utilizing user-defined stylesheets in Angular components: A guide

I've developed an Angular component named button, and I would like the user who integrates it into their app to be able to customize the button's color. Is there a method other than utilizing Input() decorators? ...

htmlcssnode.jsangularcomponents

Can the data cells of columns be dynamically adjusted to align them on a single vertical line?

For some time now, I have been grappling with a CSS issue. I am working with a table that has 3 columns displaying departures, times, and situational text for scenarios like delays or cancellations. However, as evident from the images, the alignment of th ...

cssreactjstypescriptsass

Is it permissible to have <ul> tags within an H1 element?

I am curious about whether adding a list inside an H1 heading could cause any issues: <h1> <ul> <li><a href="...">some link</a></li> <li><a href="...">another link</a></li> <li>curre ...

htmlcssseo

What is causing textareas and text input fields inside sortable divs to be uneditable in all browsers except Chrome?

I have a group of draggable elements displayed using the jQuery UI widget. During testing in Chrome, everything works perfectly. However, in other browsers, there seem to be issues. It appears that Chrome handles the functionality better compared to other ...

jquerycssjquery-uijquery-ui-sortableasp.net-webpages

What is the best way to eliminate the border line from a table?

I'm in the process of creating a table and I would like to know how to remove the border line from it. Below is my code snippet: <div id="table"> <table class="table table-bordered"> <thead> <tr> & ...

htmlcss

Searching in Python Django with multiple attributes involvedUsing multiple attributes for

My search form consists of three fields: [Doctor][Specialty][City] Below is the HTML code for the form: <form data-provide="validation" data-disable="true" class="input-glass mt-7" method='POST' action='annuaire/'> ...

pythonhtmldjangotwitter-bootstrap-3

The functionality of the jQuery addClass method is failing to work when implemented on

Hello, I'm currently attempting to implement a CSS Style on an <img> tag that does not have any assigned class or id. Below is my code snippet: ===CSS=== .tgll-navi { //custom class for navigation bar .navi-left { //.navi-left float:right; ...

javascriptjquerycssimagescroll

Gallery with blinking hover effect

I'm struggling with a blinking hover effect in my gallery made with HTML and CSS. I've been searching for a solution but can't seem to fix it. Can anyone offer some help? Check out the code on jsfiddle.com HTML: <div id="gallery"> ...

htmlcsshoverfrontend

Tips for showcasing information on an HTML website

I am currently facing an issue with displaying addresses retrieved from a database in my project. The problem lies in the formatting of the address when it is displayed on the page. Currently, the address is being displayed as follows: Address: 1 Kings S ...

htmlcsstwitter-bootstrap

Guide to creating a search bar that scans the text inside an external .txt file

Kindly scroll down to view the updated content, or read through from here for a better understanding of my requirements. I am seeking assistance from an expert in developing a website (not exactly my forte :D) which allows users to search for their banned ...

javascriptphphtmlcsssearch