How do I make a newline after a twitter bootstrap element

Question

I apologize because this seems like such a simple thing   What s the correct way to insert a newline in a way that the next element is on a newline  It seems like some things automatically do this  such as  lt p gt  within    but I m seeing behavior where the next element can appear right next to the last element   HTML    lt ul class  nav nav-tabs span2  gt       lt li gt  lt a href    index html  gt  lt i class  icon-black icon-music  gt  lt  i gt  lt  a gt  lt  li gt       lt li gt  lt a href    about html  gt  lt i class  icon-black icon-eye-open  gt  lt  i gt  lt  a gt  lt  li gt       lt li gt  lt a href    team html  gt  lt i class  icon-black icon-user  gt  lt  i gt  lt  a gt  lt  li gt       lt li gt  lt a href    contact html  gt  lt i class  icon-black icon-envelope  gt  lt  i gt  lt  a gt  lt  li gt   lt  ul gt   lt BR   gt   lt  -- It seems dumb to need this   Is this really how -- gt   lt BR   gt   lt  -- to get a newline  -- gt   lt BR   gt   lt  -- Well  it s what -- gt   lt BR   gt   lt  -- I m doing now  I suppose    -- gt   lt BR   gt    lt div class  well span6  gt       lt h3 gt I wish this appeared on the next line without having to gratuitously use BR  lt  h3 gt   lt  div gt    What is the correct or elegant way to handle newlines after things like ul or div   Am I overlooking a general setup of the code that handles this

User · Accepted Answer

You re using span6 and span2  Both of these classes are  float left  meaning  if possible they will always try to sit next to each other   Twitter bootstrap is based on a 12 grid system  So you should generally always get the span      to add up to 12   E g    span4   span4   span4 OR span6   span6 OR span4   span3   span5   To force a span down though  without listening to the previous float you can use twitter bootstraps clearfix class  To do this  your code should look like this    lt ul class  nav nav-tabs span2  gt     lt li gt  lt a href    index html  gt  lt i class  icon-black icon-music  gt  lt  i gt  lt  a gt  lt  li gt     lt li gt  lt a href    about html  gt  lt i class  icon-black icon-eye-open  gt  lt  i gt  lt  a gt  lt  li gt     lt li gt  lt a href    team html  gt  lt i class  icon-black icon-user  gt  lt  i gt  lt  a gt  lt  li gt     lt li gt  lt a href    contact html  gt  lt i class  icon-black icon-envelope  gt  lt  i gt  lt  a gt  lt  li gt   lt  ul gt   lt  -- Notice this following line -- gt   lt div class  clearfix  gt  lt  div gt   lt div class  well span6  gt     lt h3 gt I wish this appeared on the next line without having to gratuitously use BR  lt  h3 gt   lt  div gt

User · Answer

Like KingCronus mentioned in the comments you can use the row class to make the list or heading on its own line  You could use the row class on either or both elements    lt ul class  nav nav-tabs span2 row  gt     lt li gt  lt a href    index html  gt  lt i class  icon-black icon-music  gt  lt  i gt  lt  a gt  lt  li gt     lt li gt  lt a href    about html  gt  lt i class  icon-black icon-eye-open  gt  lt  i gt  lt  a gt  lt  li gt     lt li gt  lt a href    team html  gt  lt i class  icon-black icon-user  gt  lt  i gt  lt  a gt  lt  li gt     lt li gt  lt a href    contact html  gt  lt i class  icon-black icon-envelope  gt  lt  i gt  lt  a gt  lt  li gt   lt  ul gt    lt div class  well span6 row  gt     lt h3 gt I wish this appeared on the next line without having to gratuitously use BR  lt  h3 gt   lt  div gt

User · Answer

May be the solution could be use a padding property    lt div class  well span6  style  padding-top  50px  gt       lt h3 gt I wish this appeared on the next line without having to          gratuitously use BR       lt  h3 gt   lt  div gt

User · Answer

I believe Twitter Bootstrap has a class called clearfix that you can use to clear the floating    lt ul class  nav nav-tabs span2 clearfix  gt

User · Answer

Bootstrap 4    lt div class  w-100  gt  lt  div gt    Source  https   v4-alpha getbootstrap com layout grid  equal-width-multi-row

User · Answer

Using br elements is fine  and as long as you don t need a lot of space between elements  is actually a logical thing to do as anyone can read your code and understand what spacing logic you are using   The alternative is to create a custom class for white space  In bootstrap 4 you can use    lt div class  w-100  gt  lt  div gt    to make a blank row across the page  but this is no different to using the  lt br gt  tag  The downside to creating a custom class for white space is that it can be a pain to read for others who view your code  A custom class would also apply the same amount of white space each time you used it  so if you wanted different amounts of white space on the same page  then you would need to create several white space classes   In most cases  it is just easier to use  lt br gt  or  lt div class  w-100  gt  lt  div gt  for the sake of ease and readability  it doesn t look pretty  but it works

[html] How do I make a newline after a twitter bootstrap element?

Examples related to html

Examples related to twitter-bootstrap

Examples related to css-float

Examples related to html-lists

Examples related to clearfix