How to prevent the DIV from starting a new line with CSS?

To prevent the DIV from starting a new line with CSS, we set the overflow and white-space properties.

For instance, we write

<div style="overflow: hidden; white-space: nowrap">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris
  nunc, vehicula at nisl eu, aliquam ultrices augue. Nullam eget auctor metus.
</div>

to add a div that hides overflowing text with overflow: hidden

And we hide any text that wraps to the next line with white-space: nowrap.

How to add HTML ordered list lower-alpha with right parentheses?

To add HTML ordered list lower-alpha with right parentheses, we set the content property.

For instance, we write

<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

to add the ordered list.

Then we write

ol {
  counter-reset: list;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

to set content to counter(list, lower-alpha) ") " to set the counter to letters.

How to disable a link in Bootstrap with CSS?

To disable a link in Bootstrap with CSS, we set the pointer-events property.

For instance, we write

<a href="#" class="disabled" tabindex="-1">Link to disable</a><br />

to add a link.

Then we write

a.disabled {
  color: gray;
  pointer-events: none;
}

to set pointer-events to none to disable clicks on the link with class disabled.

We set its color to gray to make the text look grayed out.

How to split div into 2 columns using CSS?

To split div into 2 columns using CSS, we use flexbox.

For instance, we write

<div id="content">
  <div id="left">
    <div id="object1"></div>
    <div id="object2"></div>
  </div>

  <div id="right">
    <div id="object3"></div>
    <div id="object4"></div>
  </div>
</div>

to add nested divs.

Then we write

#content {
  display: flex;
}

#left,
#right {
  flex: 50%;
}

to make the outer div a flex container with display: flex; and make its contents display side by side.

And then we make the div with IDs left and right take 50% of the space with flex: 50%;