Bootstrap: How to Create a Series of Div on One Line Hiding The Overflowing Divs

Bootstrap: How to create a series of div on one line hiding the overflowing divs

You should have a container for all the <div> that has width equal to the sum of all <div>. Then the parent of this container has to have overflow: auto.

If you don't know the total width prior to the render you can use JS to calculate it.

Continuing your example:

<div class="row-fluid">
    <div class="span12">

        <!-- Changed from `hidden` to `auto`. -->
        <div style="overflow:auto;width:90%;">

            <!-- This is the div that does the trick: -->
            <div style="width:1200px;">

            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>

            </div>

        </div>
    </div>
</div>

Auto adjust width of divs on show/hide of one div in bootstrap html

With bootstrap you can tell to hide a div when the window is in a special size.

You have 4 size : extra small (xs), small (sm), medium (md) and large (lg)

My example show how to hide one div when the page is medium or xs, that mean the column 2 will be show only when the page is large.

So you can write :

.border{  border : 1px solid green; }

<!DOCTYPE html><html lang="en"><head>  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head>
<body>  <div class="row col-lg-12">    <div class="col-lg-4 col-xs-6 border">      <h3>Column 1</h3>    </div>    <div class="col-lg-4 hidden-md hidden-sm hidden-xs border">      <h3>Column 2</h3>    </div>    <div class="col-lg-4 col-xs-6 border">      <h3>Column 3</h3>            </div>  </div></div>
</body></html>

How to put two divs on same line in bootstrap

Try this Jsfiddle link here. To fix this issue I have used only three bootstrap classes .d-flex, .align-items-center and .d-inline-block.
It is not a best practice, applying .row and .col classes everywhere in your layout. You need to understand the right place for their application.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><div class="d-flex align-items-center">            <div class="d-inline-block">                <h2 id="product-name" class="">Stickers troquelados</h2>            </div>            <div class="d-inline-block">                    <span class="">                            <i class="gold-star fas fa-star"></i>                            <i class="gold-star fas fa-star"></i>                            <i class="gold-star fas fa-star"></i>                            <i class="gold-star fas fa-star"></i>                            <i class="gold-star fas fa-star-half-alt"></i>                            <!-- <a class=""><i class="gold-star fas fa-star"></i></a>                            <a class=""><i class="gold-star fas fa-star"></i></a>                            <a class=""><i class="gold-star fas fa-star"></i></a>                            <a class=""><i class="gold-star fas fa-star"></i></a>                            <a class=""><i class="gold-star fas fa-star-half-alt"></i></a> -->                            858 comentarios                    </span>            </div>    </div>

9 divs in a row, want to lose one div at every breakpoint with bootstrap

Then just don't use bootstrap!!!, use float:left instead, and let the browser decide when to move the overflowing divs to the new line.

Also you could use display: inline-block; for the similar effect, while also reaping the benefits of being able to align them(blocks) as text.

Demo

How can I force div contents to stay in one line with HTML and CSS?

Try this:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

How to prevent a div from overflowing on the other one

To achieve your desired layout, you need to display both the .login form and the .mybuttons as inline-block within the same parent container. If you add container divs to the .login and .mybuttons, you can do this pretty easy.

Here's your updated fiddle.

Explanation:

In your markup, I am putting both areas within the .middle-part div and adding containers to set as display: inline-block.

<div class="middle-part">
    ...

    <div class="login-outer>
        <div class="login">
          (put your login <form> and <inputs> here)                    
        </div>
    </div>
    <div class="buttons-outer">
        <div class="mybuttons">
            <a id="Btn1" class="myBtns" >BTN1BTN1</a> 
            <a id="Btn2" class="myBtns">BTN2BTN2</a>
        </div>
    </div>
</div>

Then in your css:

// set both containers to inline-block
.login-outer, .buttons-outer      
{
    position: relative;
    display: inline-block;
    vertical-align: top;
}
// Specify breakpoint widths. When there isn't enough space
// to display these widths in the same line, they will stack instead.
.login-outer
{ 
    min-width: 500px;  // or whatever
}
.buttons-outer 
{ 
    min-width: 190px;
}

Hope this helps!

How do I keep two divs on the same line?

You can make two divs inline this way:

display:inline;
float:left;

Two div's in one line(using col-md and col-md-offset Bootstrap)

The count of columns in an entire row is always 12.

So, in your first code, you're reaching 19 columns therefore this is happening, you need to sum them up to 12.

section 1: offset 1 + width 6 = 7
then
section 2: offset 2 + width 3 = 5

Total: 12

This should work.

<div class="col-md-6 col-md-offset-1 "> </div>
<div class = "col-md-3 col-md-offset-2  "></div>

or anything that adds up to 12.

Hiding element affects other unrelated element when using Bootstrap columns

The problem is, you're trying to use fluid layout in a container that doesn't have set width. This means that the content will only stretch to contain the widest line of flow content. When you display the date, it makes your container larger, and that in turn will give more space to the time column. When you hide the date, the container only stretches to accomodate the widest item, which is one of the numbers.

Set a width on your container (.clock) before trying to use fluid layout.

Bootstrap: How to Create a Series of Div on One Line Hiding The Overflowing Divs