Twitter Bootstrap Question posted in

Two divs on top of one div sticking together using twitter-bootstrap – Twitter bootstrap

I want to achieve a setup like the following:

[- div -] [– div –]

[——- div ——–]

I want them to stick always together, no matter what the screen size is. What is the best way to achieve this with twitter-bootstrap framework?

Tags:

3

Answers


  1. 0 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-6" style="background-color:red; height:50px"></div>
<div class="col-xs-6" style="background-color:yellow; height:50px"></div>
<div class="col-xs-12" style="background-color:green; height:50px"></div>
</div>

    use the extra small grid system

    [- col-xs-6 -] [- col-xs-6 -]

    [——- col-xs-12 ——–]

    Login or Signup to reply.
  2. 0

    You can also achieve without bootstrap as below:

    [--width:50%--][--width:50%--]
[--width:100%--]

    May be you have to use other CSS like float:left and clear:both for bottom div

    Login or Signup to reply.
  3. 0

    Make sure you have bootstrap linked to the page, otherwise you won’t be able to make the magic happen. If you really want to learn, I’d recommend checking out w3 for their tutorial.

    https://www.w3schools.com/bootstrap/default.asp

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search