Bootstrap Alignment of HTML elements


Flag Post

Ibraheem

asked
1

Bootstrap Alignment of HTML elements

1 Answers


[{"insert":"Yes, Bootstrap actually makes it really easy to create columns.\n\n"},{"attributes":{"bold":true},"insert":"In Bootstrap 3"},{"attributes":{"header":2},"insert":"\n"},{"insert":"It's common to declare multiple column (col) divs inside of a single row div like this ->\n<div class=\"row\">"},{"attributes":{"code-block":true},"insert":"\n\n"},{"insert":" <div class=\"col\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" // content 1"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </div>"},{"attributes":{"code-block":true},"insert":"\n\n"},{"insert":" <div class=\"col\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" // content 2"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </div>"},{"attributes":{"code-block":true},"insert":"\n\n"},{"insert":" <div class=\"col\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" // content 3"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </div>"},{"attributes":{"code-block":true},"insert":"\n\n"},{"insert":"</div>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"\nAlthough Bootstrap automatically makes all three cols the same size, it can also be useful to specify sizes for each col (out of 12), "},{"attributes":{"bold":true},"insert":"but "},{"insert":"make sure that the different sizes of columns all add up to 12. For example you can have 3 columns with sizes 1, 1, 10 (notice how those three numbers add up to 12).\n<div class=\"row\">"},{"attributes":{"code-block":true},"insert":"\n\n"},{"insert":" <div class=\"col-sm-10\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" // content width 10"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </div>"},{"attributes":{"code-block":true},"insert":"\n\n"},{"insert":" <div class=\"col-sm-1\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" // content width 1"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </div>"},{"attributes":{"code-block":true},"insert":"\n\n"},{"insert":" <div class=\"col-sm-1\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" // content 1"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </div>"},{"attributes":{"code-block":true},"insert":"\n\n"},{"insert":"</div>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"\nAlso, notice the parameter \"sm\" in the class name. This specifies that the row will maintain these three column sizes for screen sizes sm and up. Below a small screen size (extra small), the columns will behave just like a regular div. It's common to exclude the 2nd parameter and just leave it like col-{number} because then the row will maintain the column sizes for all screen sizes. You can learn more about this on the bootstrap page: https://getbootstrap.com/docs/4.1/layout/grid/#grid-options.\n"}]

Your Answer


Feedback