Boost strap Grid system

Question

I have some experience with Jsx and today I was looking at a react project. hoping I can make some changes to the style. thinking it's like react-native, but it had bootstrap and I coulden't wrap my head around it even after spending an hour on their website.

I just wanted move a container to the left. which I thought is simple but it so tedious with bootstrap.
<div className="container" >

how about the styling below? what does that even mean. how do I decipher that?
<div className="shadow component rounded p-5 col-sm-10 col-md-6 mt-4">

anyone here have a quick cheat sheet or nice tutorial to share, and maybe can give me a quick fix on how to move that container left for now while I try to learn more of bootstrap or maybe depreciate it completely idk.

render() {
    return (
***//this box is in middle of the screen and I want to push it a little to the left***.
        <div className="container" > 
          <Notifications />
          <div className="row">
            <div className="shadow component rounded p-5 col-sm-10 col-md-6 mt-4">
              <form noValidate onSubmit={this.onSubmit}>
                <h1 className="h3 text-center mb-3 font-weight-normal h1" 
.
.
.
.
.

You can refer Bootstrap Gridsystem in detail here. https://getbootstrap.com/docs/4.1/layout/grid/ Also this might help https://stackoverflow.com/questions/11102446/how-to-adjust-bootstraps-container-div-to-100px-off-the-left-viewport-edge If these doesnt help. Please add more detail the whole container. What will be on left and what on right. — MyTwoCents, Dec 26 '19 at 05:42
I already check both those places and it did not work for me. I am going to add a spinet of code. — , Dec 26 '19 at 06:04

score 0 · Answer 1 · answered Dec 26 '19 at 11:03

No need to "decipher" it if you get the idea and actually it's really simple.

Bootstrap is basically a CSS framework that contains CSS templates for typography, forms, buttons, and other interface components.

For example: by adding shodow class to your div, it refers to a pre-defined CSS style:

.shadow {
   box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

If you add rounded class that will add more CSS:

.rounded {
   border-radius: .25rem!important;
}

And so on .. it's just about shorting the time so you don't need to write the code yourself.

Here is a free online course: Bootstrap Beginner Crash Course

Back to your main question.. First, please make sure that you already have Bootstrap in your react project, If done, no need to move the whole container Bootstrap 4 grid system is using Flexbox by default and row class already have display: flex; so you can just use auto margins inside row children divs. See the example:

Example:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="p-2 border">Flex item</div>
    <div class="p-2 border">Flex item</div>
    <div class="p-2 border ml-auto">Left Flex item</div>
  </div>
</div>

How auto margins works?

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (.mr-auto), and pushing two items to the left (.ml-auto). Docs

So, in your case you just need to add ml-auto class to your component div:

<div className="shadow component rounded p-5 col-sm-10 col-md-6 mt-4 ml-auto"></div>

Boost strap Grid system

1 Answers1