What is the best way to design a three-color column layout without any text?

I am attempting to design a three-color column layout using Bootstrap without any text.

I have successfully created the columns with the desired colors, but I am facing an issue regarding how to remove the text without affecting the size of the columns. Whenever I delete the text, the columns shrink in size.

<div class="row">
<div class="col-xs-4" style="background-color:#ACE0F8;">.col-sm- 
4</div>
<div class="col-xs-4" style="background-color:#9487BF;">.col-sm- 
4</div>
<div class="col-xs-4" style="background-color:#5C7795;">.col-sm- 
4</div>
</div>`
htmlcssbootstrap-4

Answer №1

To enhance the styling of your webpage, utilize CSS.

Create various classes and then apply styles to them accordingly.

.row {
  margin: 0 !important; /* Adjust for off-screen rendering with bootstrap */
}

.row .ccol {
  min-height: 16px;
}

.c1 {
  background: #ACE0F8;
}

.c2 {
  background: #9487BF;
}

.c3 {
  background: #5C7795;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-4 ccol c1"></div>
  <div class="col-4 ccol c2"></div>
  <div class="col-4 ccol c3"></div>
</div>

Answer №2

col-xs-4 is not a valid bootstrap 4 class, make sure to use one of the following valid classes:

  1. .col-
  2. .col-sm-
  3. .col-md-
  4. .col-lg-
  5. .col-xl-

Don't forget to set a minimum height for empty columns to be visible.

/* Set a height for columns to appear */
.row div {
  height: 30px;
}

/* Avoid inline styles and define colors in a separate CSS file */
.my-col-1 {
  background-color: #ACE0F8;
}

.my-col-2 {
  background-color: #9487BF;
}

.my-col-3 {
  background-color: #5C7795;
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>


<div class="row">
  <div class="col-4 my-col-1"></div>
  <div class="col-4 my-col-2"></div>
  <div class="col-4 my-col-3"></div>
</div>

Answer №3

<div class="row">
    <div class="col-xs-4 c" style="background-color:#ACE0F8;"></div>
    <div class="col-xs-4 c" style="background-color:#9487BF;"></div>
    <div class="col-xs-4 c" style="background-color:#5C7795;"></div>
</div>

Introducing a new CSS class to avoid disrupting the existing one.

.row{
  margin: 0;
}

.row .c{
  height: 100px;
  width: 100px;
}

It's worth noting that these classes aren't part of Bootstrap 4. For more information, check out the Bootstrap 4 Grid documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to transfer Material-UI FlatButton CSS to a different Button element

I've recently incorporated a loading button object into my website from (https://github.com/mathieudutour/react-progress-button), and now I want to customize it using the Material-UI FlatButton CSS. However, I'm not quite sure how to achieve this ...

javascriptcssreactjsmaterial-ui

A one-page digital space that functions as a dynamic slide show

Check out this cool website I want to emulate. The site is a single-page design where you can navigate vertically using various methods like keyboard, mouse, scroll, or swipe gestures. There are carousels that allow left and right navigation. Each section ...

javascripthtmlasp.netwebresponsive-design

Problem with Jquery show/hide feature only resolved after refreshing the page

I built a checkout page that consists of three fieldsets with unique IDs - 1, 2, and 3. I want the page to initially display only fieldset 1 while hiding fieldsets 2 and 3. Here is the jQuery code I used: $(document).ready(function(){ $("#1").show(); ...

phpjavascriptjquerycss

What is the best way to animate the scaling of a CSS property using jQuery?

I need help creating an animation where a circle div with the class of "bubble" grows from nothing to its full size when a button is clicked using jQuery. I am currently facing difficulties in making it work properly. Here's my current code snippet: ...

javascriptjqueryhtmlcssjquery-animate

Distinguishing each unique JavaScript property within an array of objects

I've been struggling with this problem for quite some time. I have an array of objects, focusing on the "00" object at the moment, and I am trying to group together the bestScore properties in a specific way: .. User Group apple .. User Group ba ...

javascriptjqueryhtml

I'm facing a challenge with getting the 'extend' feature to function correctly while using Flask in Python

As someone who is just starting out in programming, I recently decided to embark on creating a web app using flask, python, and HTML. To start off, I set up three essential files - two HTML files, and one python file. The first HTML file requiring informa ...

pythonhtmlflaskfrontendweb-frontend

Use jQuery to apply a class to some input elements when certain events like keyup or

If I type something in the input field, it should add a border to the li tag containing the text. The current script works fine, but is there a way to make this jQuery script shorter? Thank you for your help! .add_border{ border: 2px solid #000 !impor ...

javascriptjquerycss

Enhance Your NextJs Website with Interactive Tooltips using @tippyjs/react

<Link href="/company/add" > <a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a> </Link> Trying to integrate a Tippy tooltip component with a Nextjs Link do ...

javascriptbootstrap-4tooltipnext.jstippyjs

Is it feasible to customize the css3 resize feature?

I'm curious - is there a way to customize the CSS3 resize property? div { resize: both; overflow: auto; } Basically, I am looking for a horizontal resize with a vertical bar instead of the default handle. Take a look at the images for reference. ...

htmlcssstylesheet

Some of the CSS code in my file is not displaying properly on my ejs file

For some reason, only the CSS styles for my footer are rendering on my ejs file. The rest of my CSS doesn't render at all. I've tried defining the path of my static files to my views directory using the path method: app.use(express.static(path.jo ...

cssnode.jsexpressejs

What is the process for adjusting the color of a mat-divider?

Has anyone been successful in changing the color of mat-divider? I attempted the following but had no luck: component.html <mat-divider class="material-devider"></mat-divider> component.scss .material-devider { color: red } ...

htmlcssangularsassangular-material

What is the best way to directly serve a static html file from a server using React and Express?

I recently downloaded a visually appealing HTML page with links to necessary CSS and JS files from a website builder. My intention is to use this page as the landing page for my React application. However, I'm unsure of the best approach to achieve th ...

htmlreactjsexpressreact-router

Looking for assistance in presenting the value of a range slider on your webpage?

Greetings! I am facing an issue while trying to showcase the output of a slider through JavaScript. When I run the code, I encounter an error saying 'Cannot read property of null'. Below is the HTML code snippet: <div class='sliderContai ...

javascripthtml

Tips for aligning a search bar to the right position

How can I align the search bar to the right? I've attempted various methods but nothing seems to be working. I would like the 'Transaction' title to be on the left side of the card and the search bar on the right side. This is the code snip ...

htmlreactjsmaterial-ui

Deselect the checkbox if you are checking a different checkbox

Struggling with my code, it's hit or miss. Feeling defeated. Seeking assistance to uncheck a checkbox when another checkbox is checked. Check out the code below: JavaScript: $("#1 #checkAll").change(function() { if ($("#1 #checkAll").is(' ...

javascriptjqueryhtmlcheckbox

What is the reason behind my resizer bar not changing color to green?

Whenever I resize the bar between the West and Inner Center areas, it turns green. However, the bar between the Inner Center and Inner South areas does not change color. How can I make it turn green when resizing, including adding the orange highlight for ...

javascriptjquerycssjquery-ui

The alignment of links is not meeting the centering requirement

I'm facing a challenge with aligning my "buttons" on the pages, although they are essentially text links designed to resemble buttons using CSS. These buttons are utilized within an unordered list structure (refer to the HTML snippet below). The rele ...

htmlcssresponsive-design

Insert this HTML table along with radio buttons into an Excel spreadsheet

My HTML table contains rows with a variety of content, including plain text characters and elements like radio buttons and lists. I want users to be able to copy-paste the table into MS Excel as plain text and have the radio button values replaced with "c ...

javascripthtmlexcel

How to incorporate Bootstrap carousel into WordPress without relying on a plugin?

I've successfully integrated the bootstrap carousel into my Wordpress site. The slides are sourced from pages, with a specific page called "carousel" containing subpages where post-thumbnails are extracted. I'm still learning the ropes of using W ...

phpjquerywordpressbootstrap-4

Steps to indicate a selected check column in a grid

I am working with a grid that has a check column, and I need to programmatically mark the checkbox. This is how the check column is coded: columns: { items:[ { itemId: 'checkColumn', xtype: 'selectallche ...

javascripthtmlextjs