Discussion of Coding

Blog coding and discussion of coding about JavaScript, PHP, CGI, general web building etc.

Monday, January 30, 2017

Issue aligning footer text center

Author:  |   |  No comments | 

Page Heading Secondary Text

Project One

Subheading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.

View Project

Project Two

Subheading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.

View Project

Project Three

Subheading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, temporibus, dolores, at, praesentium ut unde repudiandae voluptatum sit ab debitis suscipit fugiat natus velit excepturi amet commodi deleniti alias possimus!

View Project

Project Four

Subheading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quidem, consectetur, officia rem officiis illum aliquam perspiciatis aspernatur quod modi hic nemo qui soluta aut eius fugit quam in suscipit?

View Project
Copyright ? 2017. J. All rights reserved.

Answer by RenzoCC for Issue aligning footer text center


You don't have to place the container inside the footer,

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

so you can place the container class in the footer tag

/* Sticky footer styles  -------------------------------------------------- */  html {    position: relative;    min-height: 100%;  }  body {    /* Margin bottom by footer height */    margin-bottom: 40px;  }  .footer {    position: absolute;    bottom: 0;    width: 100%;    /* Set the fixed height of the footer here */    height: 60px;    line-height: 60px; /* Vertically center the text there */    text-align: center;    color: #bababa;    background-color: #ffffff;    font-size: 11px;    font-family: 'Nunito Sans', sans-serif;  }
                Jenny Hua                                                            
           
               
                      
              
                  
Page Heading                      Secondary Text                  
              
          
                                
              
                                                                        
              
                  
Project One
                  
Subheading
                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.
                  View Project               
          
                      
                      
              
                                                                        
              
                  
Project Two
                  
Subheading
                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.
                  View Project               
          
                      
                      
              
                                                                        
              
                  
Project Three
                  
Subheading
                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, temporibus, dolores, at, praesentium ut unde repudiandae voluptatum sit ab debitis suscipit fugiat natus velit excepturi amet commodi deleniti alias possimus!
                  View Project               
          
                      
                      
                
                                                                        
              
                  
Project Four
                  
Subheading
                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quidem, consectetur, officia rem officiis illum aliquam perspiciatis aspernatur quod modi hic nemo qui soluta aut eius fugit quam in suscipit?
                  View Project               
          
                                
              Copyright ? 2017. J. All rights reserved.

Answer by Chris Happy for Issue aligning footer text center


Remove position: absolute

/* Sticky footer styles  -------------------------------------------------- */  html {    position: relative;    min-height: 100%;  }  body {    /* Margin bottom by footer height */    margin-bottom: 40px;  }  .footer {    position: static; /* ======== Changed this code =======*/    bottom: 0;    width: 100%;    /* Set the fixed height of the footer here */    height: 60px;    line-height: 60px; /* Vertically center the text there */    text-align: center;    color: #bababa;    background-color: #ffffff;    font-size: 11px;    font-family: 'Nunito Sans', sans-serif;  }
                Jenny Hua                                                            
           
               
                      
              
                  
Page Heading                      Secondary Text                  
              
          
                                
              
                                                                        
              
                  
Project One
                  
Subheading
                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.
                  View Project               
          
                      
                      
              
                                                                        
              
                  
Project Two
                  
Subheading
                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.
                  View Project               
          
                      
                      
              
                                                                        
              
                  
Project Three
                  
Subheading
                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, temporibus, dolores, at, praesentium ut unde repudiandae voluptatum sit ab debitis suscipit fugiat natus velit excepturi amet commodi deleniti alias possimus!
                  View Project               
          
                      
                      
                
                                                                        
              
                  
Project Four
                  
Subheading
                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quidem, consectetur, officia rem officiis illum aliquam perspiciatis aspernatur quod modi hic nemo qui soluta aut eius fugit quam in suscipit?
                  View Project               
          
                                
        
          Copyright ? 2017. J. All rights reserved.

Answer by Vishnu for Issue aligning footer text center


Add right:0; left:0; in to the footer style

.footer {      right: 0;      left: 0;      position: absolute;      bottom: 0;      width: 100%;      height: 60px;      line-height: 60px;      text-align: center;      color: #bababa;      background-color: #ffffff;      font-size: 11px;      font-family: 'Nunito Sans', sans-serif;  }

Answer by Awadhesh verma for Issue aligning footer text center


Use this code because I found some error on your code and on your code first container is not closed. So follow this structure:

                                                                      Jenny Hua                                                                                                                                                                                    
                          
                                                  
                          
              
                
Page Heading Secondary Text 
              
            
                                       
              
    
              
                
Project One
                
Subheading
                
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.
                View Project  
            
                          
                          
              
    
              
                
Project Two
                
Subheading
                
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.
                View Project  
            
                          
                          
              
    
              
                
Project Three
                
Subheading
                
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, temporibus, dolores, at, praesentium ut unde repudiandae voluptatum sit ab debitis suscipit fugiat natus velit excepturi amet commodi deleniti alias possimus!
                View Project  
            
                          
                          
              
    
              
                
Project Four
                
Subheading
                
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quidem, consectetur, officia rem officiis illum aliquam perspiciatis aspernatur quod modi hic nemo qui soluta aut eius fugit quam in suscipit?
                View Project  
            
                                                    
            
              
 Copyright ? 2017. J. All rights reserved.

0 comments:

Post a Comment

Popular Posts

Powered by Blogger.