locked
Please can you help me to build the bootstrap layout RRS feed

  • Question

  • User-1355965324 posted

    I am trying to prepare a layout as attached here with in bootstrap. In each row there would be two box    The Left box for giving the title and image. After the title row there must be a line. The right box  for paragraph. Each box would be displayed with its border. Please any one can help me would be very much appreciated. 

    @foreach (var bookIndex in Model)
    {
     <div class="row">
            <div class="col-md-7">
                <div class="row"> // for title of the article with  header line
                     My Article Title
                </div>
                <div class="row">
                    <img>
                </div>
            </div>
            <div class="col-md-5">
               <p>ahaduashdhusaiy asdysayu ysady uidyasiud ysaidyysiydy iuasdy isayduyasd uy
                  ashduasdhiashduisahdhsahdhasdhashudhasuhdisa </p>
            </div>
    
        </div>
    
    }

    layouthttps://drive.google.com/file/d/1KQ94Is2YdPOfJRgTr17hQu0YErkKYiRF/view?usp=sharing

    Wednesday, July 8, 2020 9:23 PM

All replies

  • User-1330468790 posted

    Hi polacha,

     

    I just take one ROW from your codes to show how to use bootstrap to form your desired layout. 

    My understanding is that

    1. The content in one row and this row was split into two parts: left part A and right part B.
    2. The left part A will contain left and right parts.
    3. The line will be rendered only for the left part A.

    If above layout is not what you expect, feel free to let me know.

     

    You could refer to below demo (bootstrap 4.0): 

    HTML:

    <div>
                <div class="row">
                    <div class="col-md-6 row border-dark border-bottom  ">
                        <div class="col-md align-self-center text-center">
                            <h3>My Article Title</h3>
                        </div>
                        <div class="col-md-auto align-self-center">
                            <img src="Images/car1.jpg" height="90" width="90" class="rounded-circle" />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <p>
                            ahaduashdhusaiy asdysayu ysady uidyasiud ysaidyysiydy iuasdy isayduyasd uy
                  ashduasdhiashduisahdhsahdhasdhashudhasuhdisa
                            ahaduashdhusaiy asdysayu ysady uidyasiud ysaidyysiydy iuasdy isayduyasd uy
                  ashduasdhiashduisahdhsahdhasdhashudhasuhdisa
                            ahaduashdhusaiy asdysayu ysady uidyasiud ysaidyysiydy iuasdy isayduyasd uy
                  ashduasdhiashduisahdhsahdhasdhashudhasuhdisa
                            ahaduashdhusaiy asdysayu ysady uidyasiud ysaidyysiydy iuasdy isayduyasd uy
                  ashduasdhiashduisahdhsahdhasdhashudhasuhdisa
                        </p>
                    </div>
    
                </div>
            </div>

    The rendered page:

     

    You could simply add boot CDN as below:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>

    The classes used in the demo are:

    1. row: to form a row
    2. col-md-6: to define a size for the column
    3. border-dark, border-bottom: defines border color and border direction
    4. align-self-center: vertical center
    5. text-center: text center as its name 

    More information, you could refer to above links attached on the class name.

     

    Hope this can help you.

    Best regards,

    Sean

    Thursday, July 9, 2020 3:33 AM