Results 1 to 4 of 4

Thread: Bootstrap 3: containers and padding help needed :)

  1. #1
    Junior Member
    Join Date
    Mar 2017
    Posts
    2

    Bootstrap 3: containers and padding help needed :)

    Hey,

    I'm new to the forum and immediately I request your help. I learn bootstrap 3, actually it's my first attempt to work with containers, grids etc.
    Reading the documentation solved 90% of my problems besides this ONE:

    Here's how my initial layout looks like:
    https://www.dropbox.com/s/vrg6odhrsorat5q/foto.jpg?dl=0

    I have main container and then
    1. col-xs-12 - with text
    2. col-xs-12 - with a photo, which I'd like to fill the whole width of the row.
    Unfortunately I cant deal with the latter. On the above picture I drew red squares which I'd like to eliminate (picture should fill the whole width) and the green square is an additional question - can I somehow automatically adjust the amount of these two bottom rows?

    I prepared a source files as well: https://www.dropbox.com/s/g9hqntkyvr...iners.zip?dl=0

    Basically that's it, I know it is probably a super cliché, but as I wrote still learning and cannot handle it

    Thank you very much for your help in advance

  2. #2
    Junior Member
    Join Date
    Mar 2017
    Posts
    22
    Post your code in here. I'm pretty sure that people won't download a file

  3. #3
    Junior Member
    Join Date
    Mar 2017
    Posts
    2
    @mlegg: good suggestion

    Here's the code

    <style>
    body {
    background: #757575 !important;
    }
    </style>


    <div class="container">
    <div class="row">
    <div class="col-xs-12" style="background-color: white;">
    <h2>Title </h2>
    <p>subtitle</p>
    </div>
    </div>
    <div class="row">
    <div class="col-xs-12" style="background-color: silver;">
    <img src="img/big.jpg" class="img-responsive">
    </div>
    </div>

    <div class="row">
    <div class="col-md-7 col-lg-9" style="background-color: white;">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare ultrices leo vel ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra lacus lorem, eu aliquet urna aliquam quis. Duis vitae
    orci sed justo semper convallis quis ac enim. Quisque orci turpis, dictum volutpat sagittis sit amet, sollicitudin a sem. Sed venenatis accumsan mi in scelerisque. Aliquam volutpat diam in neque posuere porttitor. Nullam eleifend metus
    id congue finibus. Phasellus sodales, diam sit amet cursus consectetur, purus quam finibus sem, elementum varius dui massa cursus purus. Sed nec interdum libero. Mauris imperdiet leo urna, nec feugiat erat venenatis quis. Morbi libero
    neque, gravida in efficitur vitae, finibus non nulla. Quisque a ante leo. Nulla facilisi. Proin tempus nibh a massa blandit sodales. Integer in ultricies ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos. Fusce maximus eu nisi quis blandit. Nulla facilisi. Suspendisse imperdiet metus ac congue luctus. Vestibulum consectetur augue nec lacinia euismod. Morbi auctor sit amet ligula vitae dignissim.</p>
    </div>
    <div class="col-md-5 col-lg-3" style="background-color: silver;">
    <img src="img/small.jpg" class="img-responsive">
    </div>
    </div>

    </div>

  4. #4
    Junior Member
    Join Date
    Nov 2016
    Location
    Capitola
    Posts
    5
    I see the pic, and I see the code, but it's easier to problem solve with it on the web - do you have a link? www.web4uinc.com

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •