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

Question

Please refer below code what i tried   lt div class  row  gt     lt div class  center-block  gt First Div lt  div gt     lt div class  center-block  gt Second DIV  lt  div gt   lt  div gt    output    First Div SecondDiv   Expected output                          First Div        Second Div   i want to align the two divs horizontally  center to page using bootstrap css  how can i do this   i dont want to use simple css and floating concept to do this  because i need to make use of the bootstrap css to work in all kind of layouts  i e  all window size and resolutions   instead of using media query

User · Answer

Use the bootstrap classes col-xx-  and col-xx-offset-   So what is happening here is your screen is getting divided into 12 columns  In col-xx-     is the number of columns you cover and offset is the number of columns you leave    For xx  in a general website  md is preferred and if you want your layout to look the same in a mobile device  xs is preferred   With what I can make of your requirement    lt div class  row  gt     lt div class  col-md-4  gt First Div lt  div gt     lt div class  col-md-8  gt Second DIV  lt  div gt   lt  div gt    Should do the trick

User · Answer

Anyone going for Bootstrap 5  beta as on date   here is what worked for me  In my case  I had to align two items in the card s header section side-by-side   lt div class  quot card small-card text-white bg-secondary quot  gt       lt div class  quot d-flex justify-content-between card-header quot  gt           lt div class  quot col-md-6 col-sm-6 quot  gt               lt h4 gt 100  Components lt  h4 gt           lt  div gt           lt div class  quot ml-auto quot  gt           lt  -- lt div class  quot col-md-6 col-sm-6 ml-auto quot  gt  -- gt               lt i class  quot data-feather hoverzoom quot  data-feather  quot grid quot  gt  lt  i gt           lt  div gt       lt  div gt       lt div class  quot card-body quot  gt           lt p gt Lorem ipsum dolor sit amet  adipscing elitr  sed diam             nonumy eirmod tempor ividunt labor dolore magna  lt  p gt       lt  div gt   lt  div gt   The catch here is justify-content-between and ml-auto  You can get more info here at the official link  And a live working example here

User · Answer

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

User · Answer

lt div class  container  gt       lt div class  row  gt          lt div class  col-xs-6 col-sm-6 col-md-6  gt            First Div         lt  div gt          lt div class  col-xs-6 col-sm-6 col-md-6  gt            Second Div         lt  div gt      lt  div gt      This does the trick

User · Answer

I recommend css grid over bootstrap if what you really want  is to have more structured data  e g  a side by side table with multiple rows  because you don t have to add class name for every child      css-grid  https   www w3schools com css tryit asp filename trycss grid    https   css-tricks com snippets css complete-guide-grid   grid-container     display  grid    grid-template-columns  auto auto     20vw 40vw for me because I have dt and dd   padding  10px    text-align  left    justify-content  center    align-items  center      grid-container  gt  div     padding  20px       lt div class  grid-container  gt     lt div gt 1 lt  div gt     lt div gt 2 lt  div gt     lt div gt 3 lt  div gt     lt div gt 4 lt  div gt     lt div gt 5 lt  div gt     lt div gt 6 lt  div gt     lt div gt 7 lt  div gt     lt div gt 8 lt  div gt   lt  div gt    css-grid

User · Answer

Alternate Bootstrap 4 solution  this way you can use divs which are smaller than col-6       lt div class  container  gt     lt div class  row justify-content-center  gt       lt div class  col-4  gt        One of two columns      lt  div gt       lt div class  col-4  gt        One of two columns      lt  div gt     lt  div gt   lt  div gt    More

User · Answer

To align two divs horizontally you just have to combine two classes of Bootstrap  Here s how    lt div class   container-fluid  gt     lt div class   row  gt       lt div class   col-md-6 col-sm-6  gt          First Div      lt  div gt       lt div class   col-md-6 col-sm-6  gt          Second Div       lt  div gt     lt  div gt   lt  div gt

User · Answer

The response provided by Ranveer  second answer above  absolutely does NOT work    He says to use col-xx-offset-   but that is not how offsets are used    If you wasted your time trying to use col-xx-offset-   as I did based on his answer  the solution is to use offset-xx-

User · Answer

This should do the trick    lt div class  container  gt       lt div class  row  gt           lt div class  col-xs-6  gt              ONE          lt  div gt           lt div class  col-xs-6  gt              TWO          lt  div gt       lt  div gt   lt  div gt    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

User · Answer

Alternative which I did programming Angular         lt div class  form-row  gt           lt div class  form-group col-md-7  gt               Left          lt  div gt           lt div class  form-group col-md-5  gt               Right          lt  div gt       lt  div gt

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

Examples related to html

Examples related to css

Examples related to twitter-bootstrap