发表新帖
发表新帖

Align two divs horizontally side by side center to the page using bootstrap css

前端 未结
关注
9 2261
春和景丽
春和景丽 2020-12-12 16:07

Please refer below code what i tried


  
First Div

  
         


        

                      

              相关标签:
       

      

      
      

        

          9条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  夕颜        
                
              
    
                            
    
                2020-12-12 16:38
              
    
            
    
            
    
                                                                       

    To align two divs horizontally you just have to combine two classes of Bootstrap:
Here's how:
    


    <div class ="container-fluid">
  <div class ="row">
    <div class ="col-md-6 col-sm-6">
        First Div
    </div>
    <div class ="col-md-6 col-sm-6">
        Second Div
     </div>
  </div>
</div>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  傲寒        
                
              
    
                            
    
                2020-12-12 16:39
              
    
            
    
            
    
                                                                       

    Make sure you wrap your "row" inside the class "container" . Also add reference to bootstrap in your html.
Something like this should work:
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
 <body>
     <p>lets learn!</p>
  <div class="container">
          <div class="row">
              <div class="col-lg-6" style="background-color: red;">
                  ONE
              </div>
              <div class="col-lg-2" style="background-color: blue;">
                  TWO
              </div>
              <div class="col-lg-4" style="background-color: green;">
              THREE
           </div>
          </div>
      </div>
 </body>
 </html>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  礼貌的吻别        
                
              
    
                            
    
                2020-12-12 16:43
              
    
            
    
            
    
                                                                       

    This should do the trick:
    


    <div class="container">
    <div class="row">
        <div class="col-xs-6">
            ONE
        </div>
        <div class="col-xs-6">
            TWO
        </div>
    </div>
</div>

    


    Have a read of the grid system section of the Bootstrap docs to familiarise yourself with how Bootstrap's grids work:
    


    http://getbootstrap.com/css/#grid
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
   
                                  

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复
热议问题