What is the best way to adjust alignment while resizing in Boostrap?

Utilizing Bootstrap, I have created the following footer:

.align-center {
  text-align: center;
}

#footer {
  background-color: #3c3d41;
  color: white;
  padding-top: 25px;
  padding-bottom: 10px;
}

.footer-social-media-text {
  text-decoration: none;
  height: 25px;
  color: white;
  white-space: nowrap;
}

.footer-social-media-icon {
  padding-right: 8px;
  margin-left: 30px;
  margin-right: 2px;
  font-weight: bold;
  height: 25px;
  color: white;
}

#footer a {
  -o-transition: .25s;
  -ms-transition: .25s;
  -moz-transition: .25s;
  -webkit-transition: .25s;
  transition: .25s;
}

#footer a:hover {
  text-decoration: none;
  color: greenyellow;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<footer id="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <a href="https://www.mycompany.com/" class="footer-social-media-text">
          <i class="fa fa-home fa-2x social footer-social-media-icon"></i> My Company
        </a>
      </div>
      <div class="col-md-9">
        <a href="https://www.facebook.com" class="footer-social-media-text pull-right">
          <i class="fa fa-facebook fa-2x social footer-social-media-icon"></i> Facebook
        </a>
        <a href="https://www.instagram.com" class="footer-social-media-text pull-right">
          <i class="fa fa-instagram fa-2x social footer-social-media-icon"></i> Instagram
        </a>
        <a href="https://twitter.com" class="footer-social-media-text pull-right">
          <i class="fa fa-twitter fa-2x social footer-social-media-icon"></i> Twitter
        </a>
      </div>
    </div>
    <hr />
    <p class="align-center">© 2017 My Company</p>
  </div>
</footer>

</div>

</div>

https://jsfiddle.net/coyagf2b/

The challenge I am facing with the above code is that the width thresholds of <div class="col-md-3"> and <div class="col-md-9"> in the bootstrap grid do not align with my desired layout.

Specifically, here's what I want to achieve:

  • Ensure the right part stacks below the left part when the page width is significantly reduced. I have experimented with different combinations of col-md-x, col-lg-x, col-sm-x without success.
  • Change the content alignment of both parts to center when the right part stacks below.

How can I accomplish this?

htmlcsstwitter-bootstrap

Answer №1

Utilizing Bootstrap's col-xs- classes seamlessly integrates with your code. To ensure the right column stacks underneath the left, simply add col-xs-12 to each col-md- div you're using. If you wish to center exclusively on mobile devices, employing media queries can help achieve that effect. A snippet of what it might look like is as follows:

@media (max-width: 991px){
  .centerSection{
    text-align:center;
  }
}

@media (min-width: 992px){
  .rightSection {
    float:right;
  }
}

Additionally, here's a direct link to a functional codepen example:

https://codepen.io/egerrard/pen/rGrPmM

Answer №2

Take a look at this sample, which demonstrates the use of classes like .text-center, .float-md-left and .float-md-right.

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

Utilizing a wysiwyg text editor in conjunction with Angular 2

I am currently implementing a wysiwyg feature in my Angular2 project. When I include the code in the index.html page (the root page), it functions correctly. However, when I try to use it in a child view HTML file, the CSS and JavaScript do not load prope ...

javascripthtmlcssangularwysiwyg

Event emitting from a parent Vue.js component

I can't figure out why my code is not functioning properly. I have an event called 'leave' that should be triggered on blur. The components show up correctly, but the event doesn't fire when leaving the inputs. Vue.component('te ...

javascripthtmleventsvue.jscomponents

The custom HTML menu implementation is causing the jQuery autocomplete to lose its "Select" functionality

Seeking assistance in implementing jQuery autocomplete with a custom drop down menu. I have managed to customize menu items using the data()._renderItem method (which is currently commented out), however, this approach disables the menu "Select" function ...

jqueryhtmlmenuautocomplete

Is add1 missing from the DOM? Learn how to include it

Having an issue with Java-Script and an HTML form. The scenario is that there's a main form with an "Add" button, which when clicked should display a second form. Next to the second form is another button labeled "Add1," which ideally should trigger ...

javascripthtml

Divide the webpage into four equal sections, each showcasing distinct information sourced from the database

Is there a way to divide my page into 4 sections with data from a database source? Currently, I am displaying the data from the database in a single table, but I would like to split it into four parts, each showing different results from the database. Ad ...

phphtmlmysql

Unable to load the Universe 55 font using the @font-face rule

I recently encountered an issue with using a custom font (Universe 55 font) in html5. I downloaded the .ttf file, applied it with the @font-face rule, and tested it on various browsers including IE, Chrome, and mobile browsers. Unfortunately, the font does ...

htmlcssfont-facetruetype

Ways to attach jQuery live to the entire window?

tag: I want to trigger specific functions whenever the mouse moves, regardless of its position on the browser window. Currently, I am using the following code snippet: $('html').on('mousemove', function(e) { ... } However, this appr ...

javascriptjqueryhtml

What is the reason 'type=button' is not functioning properly in place of 'type=submit'?

Hello, I am facing an issue with this code snippet: The problem: Whenever I change the <input id="ContactForm1_contact-form-submit" type="submit" value="Confirmation"> to <input id="ContactForm1_contact-form-submit" type="button" value="Confi ...

javascriptjqueryhtml

The margin-left negative is not functioning when setting the left side at 50%

I'm having trouble getting this specific CSS to work on an element: .element { position: absolute; left: 50%; margin-left: -285px // the element has width: 500px; } This element is contained within another div that also has an absolute positio ...

javascriptjqueryhtmlcss

The flexbox row in Bootstrap stays intact in Firefox instead of breaking to a new line

My layout uses flex mode and appears fine in Chrome and Safari, but doesn't look great in Firefox and IE. Here's my HTML code: <div ng-repeat="section in categorySections" class="row-flex row-flex-wrap"> <div class="flex-col lesson- ...

htmlcsslessflexbox

CSS-enhanced automatic scrolling

On my WordPress website, there is a project slider that consists of images with text. Currently, the slider does not auto-scroll and requires manual navigation using buttons. If I want to eliminate the need for buttons and make the slider scroll automatic ...

cssanimationscroll

Show the modal content in Bootstrap on mobile and tablet screens

I have exhaustively searched the web for a solution to my issue, but unfortunately, I have come up empty-handed. I am hoping that you can offer some guidance in this matter. I am currently utilizing modals to showcase details on my website. However, when ...

htmlbootstrap-4

How can I manage the pageWidth property in the layout of my xPage Bootstrap app?

Check out these two examples - one with app layout and the other with just a navbar, both with fixed pageWidth settings. <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex"> <xe:applicationLayout id="a ...

csstwitter-bootstrapxpageslotus-notes

Trouble with the display none function

I am trying to achieve the following: If my shopping cart is empty, I want another div to display over the top of it. Instead of seeing the cart, users should see a message saying 'your cart is empty'. Currently, I have set the other div to dis ...

javascriptcss

Eliminate the paragraph tags from the text submitted in the textarea within the Froala Editor

Hey there, I've integrated the Froala editor into my Flask application. However, when retrieving the content of the textarea in Python, it always comes wrapped in <p></p> tags. Can anyone advise on how to prevent this wrapping from happeni ...

pythonjqueryhtmlflaskfroala

Collaborating with interactive icon in input group

I'm having trouble getting the textbox and icon to be in the same line, like a bootstrap input group. The icon is also clickable. <div class="input-group"> <asp:textbox id="txtParentCategoryCode" runat="server" cssclass="input-text normal" m ...

cssasp.netfont-awesome

Having trouble with the JavaScript function not working on page load

I'm currently working on writing JavaScript code that will run once the child page, created using the window.open function, has fully loaded. Despite trying methods like window.onload and window.setTimeout, I haven't had any success. I even expe ...

javascripthtml

Tips for showing a public image in-text when pasted on Skype or various social media platforms

As an avid user of Skype, I have discovered that when pasting a link into Skype (using the desktop app) such as a YouTube link, a thumbnail is displayed in the chat. This got me thinking about whether there is a specific class or area in my code, be it CS ...

phpcssskype

Inject the JavaScript template into an HTML page within a <div> element

Looking for a solution to format JSON API data listing books with title, author, and other properties into HTML? Utilizing ES6 backticks and JavaScript templating, the challenge arises when needing to display two cards per row on the HTML page. The issue l ...

javascriptjqueryhtmlcssunderscore.js-templating

Adjusting the Pace of a CSS Marquee

My CSS marquee effect is working perfectly, but I am having trouble with the speed. The issue arises when the text length varies - shorter text takes longer to scroll while longer text scrolls quickly. This inconsistency is due to the animation duration an ...

javascriptjqueryhtmlcss